父指令属性更改时子指令未更新 [英] Child directive not updated when parent directive property changes
问题描述
这是对这两个问题的跟进:
我有这部分工作;但是,当父指令的 ng-disabled 值发生变化时,子指令的值不会更新.
请参阅简单的 plunkr 示例.
HTML:
<div ng-controller="MyController">{{菜单状态}}<tmp-menu ng-disabled="menuStatus"><tmp-menu-link></tmp-menu-link><tmp-menu-link></tmp-menu-link></tmp-菜单><button ng-click="updateStatus()">更新</button>
JavaScript(AngularJS):
angular.module('myApp', []).controller('MyDirectiveController', MyDirectiveController).controller('MyController', function($scope){$scope.menuStatus = false;$scope.updateStatus = function(){$scope.menuStatus = $scope.menuStatus?false:true;}}).directive('tmpMenu', function() {返回 {限制:'AE',替换:真,转置:真,范围:{禁用:'=?ngDisabled'},控制器:'MyDirectiveController',模板:'<div>myDirective Disabled: {{ disabled }}<ng-transclude></ng-transclude></div>',链接:函数(范围,元素,属性){}};}).directive('tmpMenuLink', function() {返回 {限制:'AE',替换:真,转置:真,范围:{},要求:'^^tmpMenu',模板: '<div>childDirective disabled: {{ disabled }}</div>',链接:函数(范围、元素、属性、MyDirectiveCtrl){控制台.log(MyDirectiveCtrl);scope.disabled = MyDirectiveCtrl.isDisabled();}};})函数 MyDirectiveController($scope) {this.isDisabled = function() {返回 $scope.disabled;};}
如何检测父指令的变化并将其传递给子指令而不添加角度观察器.
解决方案 1
我在这里设置了一个有效的 plnkr:https://plnkr.co/edit/fsxMJPAc05imhBqefaRk?p=preview
这种行为的原因是 tmpMenuLink
保留了从 MyDirectiveCtrl.isDisabled()
返回的值的副本.没有设置观察者,因此解决此问题的唯一方法是手动观察任何更改,然后更新该字段.
scope.$watch(function(){返回 MyDirectiveCtrl.isDisabled();}, 功能(){scope.disabled = MyDirectiveCtrl.isDisabled();})
解决方案 2
没有观察者的替代方法是传递对象的引用而不是原始类型,例如:
$scope.menuStatus = {status: false};
新 plnkr 在这里:https://plnkr.co/edit/RGEK6TUuE7gkPDS6ygZe?p=preview
This is follow up to these 2 questions:
- Pass argument between parent and child directives
- Parent directive controller undefined when passing to child directive
I have this part working; however, when the value for ng-disabled for parent directive changes, the child directive values don't get updated.
Please see thin plunkr example.
HTML:
<div ng-app="myApp">
<div ng-controller="MyController">
{{menuStatus}}
<tmp-menu ng-disabled="menuStatus">
<tmp-menu-link></tmp-menu-link>
<tmp-menu-link></tmp-menu-link>
</tmp-menu>
<button ng-click="updateStatus()">Update</button>
</div>
</div>
JavaScript(AngularJS):
angular.module('myApp', [])
.controller('MyDirectiveController', MyDirectiveController)
.controller('MyController', function($scope){
$scope.menuStatus = false;
$scope.updateStatus = function(){
$scope.menuStatus = $scope.menuStatus?false:true;
}
})
.directive('tmpMenu', function() {
return {
restrict: 'AE',
replace:true,
transclude:true,
scope:{
disabled: '=?ngDisabled'
},
controller: 'MyDirectiveController',
template: '<div>myDirective Disabled: {{ disabled }}<ng-transclude></ng-transclude></div>',
link: function(scope, element, attrs) {
}
};
})
.directive('tmpMenuLink', function() {
return {
restrict: 'AE',
replace:true,
transclude:true,
scope:{
},
require:'^^tmpMenu',
template: '<div>childDirective disabled: {{ disabled }}</div>',
link: function(scope, element, attrs, MyDirectiveCtrl) {
console.log(MyDirectiveCtrl);
scope.disabled = MyDirectiveCtrl.isDisabled();
}
};
})
function MyDirectiveController($scope) {
this.isDisabled = function() {
return $scope.disabled;
};
}
How can I detect change in parent directive and pass it to child directive without adding angular watcher.
Solution 1
i've set up a working plnkr here: https://plnkr.co/edit/fsxMJPAc05imhBqefaRk?p=preview
the reason of this behaviour is that tmpMenuLink
kept a copy of the value returned from MyDirectiveCtrl.isDisabled()
. no watcher is set up , so the only way to resolve this is to manually watch for any changes and then update the field.
scope.$watch(function(){
return MyDirectiveCtrl.isDisabled();
}, function(){
scope.disabled = MyDirectiveCtrl.isDisabled();
})
Solution 2
An alternative without watchers is to pass the reference of an object instead of a primitive type, something like:
$scope.menuStatus = {status: false};
new plnkr here: https://plnkr.co/edit/RGEK6TUuE7gkPDS6ygZe?p=preview
这篇关于父指令属性更改时子指令未更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!