在angular指令中使用require更新$ watch

费达·布拉戈耶维奇（Fedja Blagojevic）

作为一个有角的新手，这是我的问题

如果我在HTML中有两个这样的指令

<parent-dir param="par">
   <child-dir></child-dir>
</parent-dir>

并在这样的JS中（在父级中）

app.directive('parentDir', function(){
return {
 restrict: 'E',
 scope: {
 param: '='
  }
 }
})

和孩子

app.directive('childDir', function(){
return {
 restrict: 'E',
 require: '^parentDir',
 controller: function($scope, $element){
  <-- SHOULD I PUT WATCHER HERE -->
  },
 link: function(scope, element, attrs, parentdirCtrl){
  <-- SHOULD I PUT WATCHER HERE -->
  }
 }
})

我应该在child指令的哪个位置制作一个可选的$ watch，以捕获对param模型的所有更改？

当然，如果我在父控制器中使用$ watch，则参数中的所有更改都将反映在父指令中，但是我似乎找不到找到将这些信息传递给子指令的方法。

潘卡·帕克（Pankaj Parkar）

您应该使用链接功能的第4个参数将其放置在可以访问父控制器的链接功能内parentdirCtrl。实际上，您不必担心该params变量，因为它=在指令内部使用了两种方式绑定，该指令会同时更新父控制器scope和指令中的值scope。此外，您需要在parentDir指令中定义控制器，以便与parentDir共享指令的范围childDir。

代码

app.directive('childDir', function() {
  return {
    restrict: 'E',
    require: '^parentDir',
    template: '<div class="test">INner {{param}}</div>',
    controller: function($scope, $element) {
    },
    link: function(scope, element, attrs, parentdirCtrl) {
      scope.$watch('param', function(newVal, oldVal) {
        console.log(newVal);
      }) //true only if its object.
    }
  }
})

Demo Plunkr

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。