angularjs - Angular 中的深度指令设计

Question

我了解隔离范围并阅读了一些有关 Angular 的资源。现在我遇到了一个问题；假设我有非常深刻的指令:

A wraps B wraps C wraps D wraps E
X wraps Y wraps D wraps E

A、B、C、D、E、X、Y 是指令。 D 和 E 需要一些传递到其隔离范围的信息，我称此信息为 info: '='。这个info属于A或X。所以如果我需要在D和E中使用info，我必须在路径中传递它:A -> B -> C -> D -> E 或 X -> Y -> D -> E。

这意味着 B、C 或 Y 必须创建其隔离范围来保存 info 值。太深!如果我将来在路径中间添加一些指令，我必须执行与上面相同的操作。我认为这不是一个好的设计。

任何人都可以给我一些建议来解决 Angular 中的这个设计问题吗？

Answer 1

好的。你可以:

1 - 将信息保存在服务中，然后将其注入(inject)到需要的地方。

2 - 允许指令通过 Controller 相互通信。例如，如果您希望指令 E 从指令 A 获取信息，A 必须有一个 Controller 和某种 getter 方法，指令 E 将需要此 Controller 并在链接函数内使用 get 方法。使用代码更容易可视化。

.directive('aDir', function () {
  return {
     restrict: 'E',
     transclude: true,
     template: '<p>aDir: {{info}}<span ng-transclude></span></p>',
     scope: {
       info: '='
     },
     controller: function ($scope) {
        this.getInfo = function () {
           return $scope.info;
        };
     },
     link: function (scope, elm, attrs) {

     }
  };
})

.directive('eDir', function () {
  return {
     restrict: 'E',
     template: '<p>eDir: {{info}}</p>',
     require: '^aDir',
     scope: { },
     link: function (scope, elm, attrs, aDirController) {
          scope.$watch(function () {
            return aDirController.getInfo();
          }, function (newVal, oldVal) {
              scope.info = newVal;
          });
     }
  };
});

Here is a JSBin .

Here you have more info about directive's require attribute.