父母指令中的$ watch不会捕获子指令更改

时间:2014-03-31 03:39:25

标签: angularjs angularjs-directive angularjs-scope

我有两个指令:

directives.parentDirective = function(){
 return{
    restrict: 'A',
    scope: true,
    controller : function($scope){
        $scope.childs = {};
        this.registerChild = function(ctrl, type){
            $scope.childs[type] = ctrl;             
        };

        this.triggerChange = function(ctrl, type){                
            $scope.childs[type] = ctrl;
        };
    },
    link: function(scope, element, attrs) {
        scope.$watchCollection('childs', function(value){
            console.debug("WATCH triggered for ");
            console.debug(value);
        });
    }
};

directives.childDirective = function(){
  return{
    restrict: 'A',
    require : ['ngModel', '^parentDirective'],
    scope: {
       'model' : '=ngModel'
    },
    link: function(scope, element, attrs, ctrl) {
        ctrl[1].registerChild(ctrl[0],ctrl[0].$name); //Works nice

        scope.$watch('model', function(value){
            ctrl[1].triggerChange(ctrl[0], ctrl[0].$name);
            //the call to triggerChange works ok.
        });
    }
};

HTML看起来像这样:

<div parentDirective="so rocks">
  <input type="text" ng-model="user.name" childDirective="whatever"/>
</div>

控制器非常基本:只需

$scope.user={name:"batman";}

所发生的是parentDirective $ watchCollection没有捕获任何更改。

它确实捕获了初始的registerChild函数。

我试图放置一个范围。$ apply();但没有运气。

1 个答案:

答案 0 :(得分:1)

在DOM中,你必须使用dash-delimited形式引用指令,而不是camelCase规范化形式:

<div parent-directive="so rocks">
  <input type="text" ng-model="user.name" child-directive="whatever"/>
</div>

这是一个plunker,显示父表正在工作: http://plnkr.co/wNUcsWuGQvCt779kB6ij

正如miqid在评论中指出的那样,儿童手表并没有改变这种类型。我将类型更改为数字并在每个监视中递增它以强制更改父级以查看。