Question

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

如果我在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，那么参数中的所有更改都会反映在父指令中，但我似乎无法找到将此信息传递给子指令的方法。

Answer 1

您应该使用链接函数parentdirCtrl的第4个参数将其置于可以访问父控制器的链接函数中。实际上你不需要担心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

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

1 个答案: