将服务变量绑定到指令?
我有一个控制器,其中包含一个从服务器获取一些数据的函数。我将这些数据存储在一个服务变量中。这个服务然后被注入一个指令。我希望指令自动更新,只要这个函数被调用并且数据被更新。将服务变量绑定到指令?
我的控制器:
angular
.module('myApp')
.controller('myCtrl', ['$scope', 'SomeService', function($scope, SomeService) {
$scope.update = function() {
SomeService.myValue = 100;
}
}]);
的指令:
angular.module('myApp')
.directive('myDirective', ['SomeService', function(SomeService) {
return {
templateUrl : 'views/myDirective.html',
restrict : 'E',
scope : false,
controller : function($scope) {
this.myValue = SomeService.myValue;
}
};
}]);
模板:
<div>
{{ myValue }}
</div>
一个按钮被按下时,更新函数被调用,它更新myvalue的到新的价值。我希望它自动反映在指令中。
请参见下面的工作演示
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, SomeService) {
$scope.name = SomeService.data;
$scope.update = function() {
$scope.name.myValue += 1;
}
});
app.factory('SomeService', function() {
var data = {
myValue: 0
};
return {
data: data
}
});
app.directive('myDirective', ['SomeService',
function(SomeService) {
return {
templateUrl: 'myDirective.html',
restrict: 'EA',
scope: false,
link: function(scope, elem, attr) {
scope.data = SomeService.data
}
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
<p>My Value: {{name.myValue}}</p>
<button ng-click="update()">Click</button>
<hr/>
<div my-directive></div>
<script type="text/ng-template" id="myDirective.html">
<h3>My Directive</h3>
<p>Value: {{data.myValue}}</p>
</script>
</div>
</div>
您可以通过添加服务指令本身的参考尝试..
的指令:
angular.module('myApp')
.directive('myDirective', ['SomeService', function(SomeService) {
return {
templateUrl : 'views/myDirective.html',
restrict : 'E',
scope : false,
controller : function($scope) {
this.SomeService = SomeService;
}
};
}]);
模板:
<div>
{{ SomeService.myValue }}
</div>
E dit:我经历过你的闯入者,终于找到了工作。
您可以检查更新的代码here
这就是我也会做的。没有额外的观察者,只是原生的JS对象引用。 – dfsq 2014-11-05 11:54:26
试过这个,不行! – 2014-11-05 11:56:18
你可以为同一个@RutwickGangurde发布一个plunker吗? – 2014-11-05 11:57:20
@RutwickGangurde和其他人谁是有问题的,如果你想设置一个范围变量,它不是一个对象,它不会工作。我猜这就是你正在做你的服务是什么:
...
this.myVar = true;
...
,然后试图将其设置在指示/控制器:
...
scope.myVar = myService.myVar;
...
不会用于获取更新的变量工作在服务发生变化时。
试试这不是您的服务:
...
this.myObj = {};
this.myObj.myVar = true;
...
,并在你的指令/控制器:
...
scope.myValue = myService.myObj;
...
,并在你的HTML:
...
{{ myValue.myVar }}
...
我会作出这样的一个评论,但我没有足够的特权,因此决定以一个非常简短的例子作为回应发布。
谢谢!我跟着这个,我可以访问链接功能中的数据。但令人惊讶的是,我在指令中看不到它! – 2014-11-05 13:30:32
@RutwickGangurde你能告诉我究竟在哪里? – sylwester 2014-11-05 13:31:54
那还有一件事......我没有明确地将控制器分配给指令。我在指令中使用的数据是一个对象。我可以在链接功能中看到它。但是当我在指令模板中使用它时,它不可见。 – 2014-11-05 14:36:54