AngularJS指令通信指令
我有一个指令嵌套在另一个指令中，如下所示。
http://jsfiddle.net/sriramr/T7W6T/3/
我的问题是:如果父指令中的变量更改了值，那么如何自动更新子指令中的变量的值，该值是从父变量中计算出来的？
var myapp = angular.module('myApp',[]);
myapp.directive('parentDir', parentDir);
function parentDir() {
return {
restrict:'E',
controller: function eCtrl($scope) {
$scope.parVal = 100;
$scope.$on("event",function(e,data) {
console.log("emit")
$scope.parVal = 200;
})
},
template:'<div><first-dir></first-dir</div>'
}
}
myapp.directive('firstDir', firstDir);
function firstDir() {
return {
restrict:'E',
controller: function($scope) {
//$scope.$watch('parVal',function() {
$scope.childVal = $scope.parVal + 1;
//})
$scope.changeVal = function() {
$scope.$emit("event")
}
},
template:'<div>first Dir: {{parVal}} {{childVal}} <br /> <button ng-click="changeVal()">Change</button></div>'
}
}父指令的控制器作用域中的变量parVal传递给子指令的控制器。子指令有自己的变量childVal，即parVal + 1。我试图通过在子指令中释放一个事件来间接地改变parVal的值。正如预期的那样，parVal的值会发生变化并反映在视图中。然而，childVal的值并没有改变。
我能够在childVal上使用$watch看到更新后的值。我还有别的办法可以做到吗？
回答 1
Stack Overflow用户
发布于 2014-06-26 01:53:56
有几种方法可以在这两个指令之间共享代码。
一种方法是利用firstDir原型从parentDir继承的方式。您已经在使用parVal进行此操作，但是您可能会遇到从子指令中更新parVal的问题。一个简单的解决方法是在父指令中创建一个更新函数。这使您可以直接更新作用域。示例：http://jsfiddle.net/T7W6T/4/
编辑:我不喜欢上面的方法，因为它将两种指令紧密结合在一起，firstDir本身也不能工作。
另一种方法是创建共享服务。以角表示的服务是单例，因此将其注入控制器的任何地方都将是与其他任何地方相同的实例。您可以很容易地创建一个发布/子机制。只需确保在订阅服务器的范围被破坏时清除订阅服务器。这是我喜欢的在指令和控制器之间共享的方式，因为您不会污染您的范围。记住，所有绑定到范围的东西都会对摘要产生影响。
最小发布/子机制的示例代码：
myapp.service('SharedService', function(){
var listeners = [];
return {
publish: function(){
angular.forEach(listeners, function(listener){
listener.call(null);
});
},
subscribe: function(fn){
listeners.push(fn);
},
unsubscribe: function(fn){
var idx = listeners.indexOf(fn);
if(idx > -1){
listeners.splice(idx,1);
}
}
}
});通过父指令与此交互，如下所示：
var update = function(){
$scope.parVal = 200;
};
SharedService.subscribe(update);
$scope.$on("$destroy", function(){
SharedService.unsubscribe(update);
});子指令是唯一可以访问要发布到侦听器的函数的东西：
$scope.updateParVal = function(){
SharedService.publish();
};http://jsfiddle.net/T7W6T/5/
关于范围继承还是$emit更好，有一个很好的解释：https://stackoverflow.com/a/18179640/151445
关于服务方法，我通常没有看到提到的一件事是，您完全控制订阅者和发布者的绑定位置。有了$scope.$emit和$scope.$on，任何有作用域的人都可以疯狂地处理事件。
https://stackoverflow.com/questions/24421078
复制相似问题
腾讯云开发者
