Question

我有这样的HTML代码

<a href="#" id="someLink">
    <i class="someClass"></i><span>Some span text</span>
</a>
<div id="dependsOnSomeLink">
    <!-- something here -->
</div>

我希望将其分成AngularJS中的指令。其背后的逻辑是，div的内容默认隐藏，并通过点击a元素显示。

我想把它分成两个指令：

angular.module('someModule', [])
  .directive('prAbc', function($log) {
    return {
      require: 'prDef',
      restrict: 'E',
      template: '<a href="#" id="someLink"><i class="someClass"></i><span>Some span text</span></a>',
      controller: function($scope, $element, $attrs, $transclude) {
        // do the harlem share <-- here
      },
      link: function(scope, iElement, iAttrs, prDef, transcludeFn) {
        iElement.bind('click', function() {
          prDef.toggleDependentBlock();
        });
      }
    };
  })
  .directive('prDef', function($log)
  {
    return {
      restrict: 'E',
      template: '<div id="dependsOnSomeLink"></div>',
      controller: function($scope, $element, $attrs, $transclude) {
        $scope.showDependentBlock = false;

        this.toggleDependentBlock = function() {
          $scope.showDependentBlock = false === $scope.showDependentBlock;
        };
      }
    };
  });

以后再用它

<pr-abc></pr-abc>
<pr-def></pr-def>

但prDef从prAbc指令调用时未定义{{1}}。

Answer 1

当require: 'prDef'和prAbc应用于同一个DOM元素时，

prDef有效，而不是您的情况。

您可能需要的是“父”指令，它将充当两个通信指令之间的路由器。 prDef将自己注册到父控制器，prAbc调用父控制器，而父控制器又调用prDef。

查看此plucker。

至少还有3个其他选项需要考虑：

让父控制器听取prAbc发出的特定事件并向下广播，prDef监听。
让父控制器将回调函数（'&'）传递给子指令以进行注册和路由。
所有函数和数据都在父元素上定义，并通过绑定或原型继承传递给子指令（实际上，破坏了你的设计：P）。

对于所有3个选项，父控制器不必在指令中定义，它可以是您应用的任何控制器，如：

<div ng-contoller="ParentCtrl">
    <pr-abc></pr-abc>
    <pr-def></pr-def>
</div>

您的示例没有提供足够的上下文来推断哪个选项最好，但我认为父指令应该是首选方式。

如果有帮助，请查看如何实施ui-bootstrap的tabs和accordion。这是一个非常有用的协作示例，仍然是解耦的指令集。

两个并排指令可以在AngularJS中相互通信吗？

1 个答案: