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

时间:2014-05-13 16:57:53

标签: angularjs angularjs-directive

我有这样的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>

prDefprAbc指令调用时未定义{{1}}。

1 个答案:

答案 0 :(得分:1)

require: 'prDef'prAbc应用于同一个DOM元素时,

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

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

查看此plucker

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

  1. 让父控制器听取prAbc发出的特定事件并向下广播,prDef监听。

  2. 让父控制器将回调函数('&')传递给子指令以进行注册和路由。

  3. 所有函数和数据都在父元素上定义,并通过绑定或原型继承传递给子指令(实际上,破坏了你的设计:P)。

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

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

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

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