AngularJS 1.4 - 如何在具有隔离范围的父子指令之间绑定值

Question

我有两个指令，它们都有一个独立的范围。我想在我的子指令中要求父指令，然后能够观察父级的范围变量是否发生变化。我不想修改孩子中的变量，我只想能够读取它。

我希望能够添加两个都可以访问列表的不同孩子，但我不想将列表绑定到每个孩子。下面的示例中缺少的是一种查看绑定到父级的列表的方法。我可以传入原始列表，但一旦更新，孩子的模型就会过时。

父指令：

  angular
      .module('app.parent', [])
      .directive('parent', parent);

      function parent() {
          var directive =  {
              restrict: 'EA',
              transclude: true,
              template: '<div>parent <pre>{{vm.list}}</pre><ng-transclude></ng-transclude> </div>',
              scope: true,
              controller: ParentController,
              controllerAs: 'vm',
              bindToController: {
                  config: "=",
                  list: "="
              }
          };

          return directive;

      function ParentController() {
          var vm = this;
      }
  }

子指令：

angular
      .module('app.parent.child', ['app.parent'])
      .directive('child', child);

      function child() {
          var directive =  {
              restrict: 'EA',
              require: ['^^parent', '^child'],
              template: '<div>child<pre>{{vm.list}}</pre></div>',
              scope: true,
              controller: ChildController,
              link: linkFunc,
              controllerAs: 'vm',
              bindToController: {
                  config: "="
              }
          };

          return directive;

      function ChildController() {
          var vm = this;
      }

      function linkFunc(scope, element, attrs, ctrls) {
          var parentController = ctrls[0];
          var vm = ctrls[1];
          vm.list = parentController.list;
      }
  }

我用上面的代码做了一个Plunkr。我正在寻找一个很好的模式来解决我遇到的问题。两个指令都有自己独特的配置对象，其中包含特定于指令的配置。

Answer 1

你可以在子指令的作用域对象上创建一个观察者，但是你可以将一个函数作为第一个参数传递给$watch()，而不是观察一个作用域项目，然后简单地返回一个你想要观察的值/对象.

例如在你的子指令的linkFunc()中

scope.$watch(function() {
        return parentController.list;
    }, function(newList) {
        vm.list = newList;
    });

修改了你的 plunkr：http://plnkr.co/edit/6WzT8PQJRH1b5KuU0twn?p=preview