Question

我有两个指令：

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（）;但没有运气。

Answer 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在评论中指出的那样，儿童手表并没有改变这种类型。我将类型更改为数字并在每个监视中递增它以强制更改父级以查看。

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

1 个答案: