Question

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

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

父指令：

  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://blogs.msdn.com/b/visualstudioalm/archive/2015/07/25/unit-test-generators-extensibility-hats-off-to-our-community.aspx?wa=wsignin1.0

AngularJS 1.4 - 如何使用隔离范围

1 个答案: