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

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個參數將其放置在可以訪問父控制器的鏈接功能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