独立管理独立AngularJS指令之间的通信

Question

这更多的是一种组织方法来解决这个问题，而不是直接的解决方案。我的问题本身是，如果我有两个指令，这两个指令彼此不依赖，并且都可以独立工作来服务于它们的目的。但是，如果其中一条指令存在，那么另一条指令需要在另一条指令准备就绪后执行。在这种情况下，什么是确保它以这种方式工作而不需要硬编码任何函数调用或事件的逻辑方法？

比方说，你有一个构建某种网格的指令：

angular.module('App').directive('appGrid',function() {
  return function($scope, element) {
    $scope.rows = ...
  };
});

然后我有另一个指令，使元素可以水平滚动：

angular.module('App').directive('appPane',function() {
  return function($scope, element) {
    element.attachHorizontalScroll();
  };
});

所以我的HTML示例如下所示：

<div data-app-grid data-app-pane>
  <div data-ng-repeat="row in rows">
    <div data-ng-repeat="cell in row.cells">
      {{ cell.data }}
    </div>
  </div>
</div>

基本上，需要在执行完appGrid指令并准备好表之后运行appPane指令。

我能想到的一种解决方案是使用$scope.$watch方法查看数据何时准备就绪，但这会带来问题，因为更改可能会多次发生，这将是冗余更新页面的糟糕设计，而且如果多个指令正在写入正在监视的同一范围变量，也会造成问题。

另一种解决方案是让第一个指令发出一个事件(类似于elementReady)，然后让第二个指令接管。但是，如果第一条指令不在那里呢？那么第二个指令怎么知道什么时候做它的工作呢？可能会有另一个指令，它基本上是一个空指令，它只是触发所有其他元素的事件，但这有点像hack。另外，如果有多个其他指令触发elementReady事件，会发生什么？

另一种解决方案是创建第三个指令，该指令通过共享服务在两个指令之间共享逻辑。但这使得第三个指令完全依赖于其他指令以及两者之间的共享服务。这也需要更多的、不必要的测试代码以及编写指令的实际代码(与只需要一行代码的第二种解决方案相比，代码要多得多)。

有什么想法吗？

Answer 1

看一下指令的优先级属性。

以下是angular文档中准确描述的副本：

优先级-当在单个DOM元素上定义了多个指令时，有时需要指定应用指令的顺序。优先级用于在指令的编译函数被调用之前对指令进行排序。更高的优先级优先。指令在同一优先级内的顺序未定义。

你应该可以在下面的

http://docs.angularjs.org/guide/directive

在编写指令(长版)-指令定义对象部分。

希望这能回答你的问题。

Answer 2

我也遇到过类似的问题。我不能使用优先级，因为连接是在单击元素之后发生的。我用$rootScope解决了这个问题。下面是一个简化的示例：

link : function (scope, element, attrs) {
   element.on('click', function() {
       $rootScope.$emit('myEvent', myData);
   });
}

在另一个指令中，您‘监听’myEvent

link : function (scope, element, attrs) {
   $rootScope.$on('myEvent', function(data) {
      // do sth
   });
}

Answer 3

问得好。我将使用属性和事件的组合。

因为只有指令的使用者(即，编写HTML的人)知道他/她希望这两个指令交互(即，依赖地运行)，我认为他/她需要以某种方式指定这一点，并且属性似乎是一个好方法(唯一的方法？)。一旦指令知道它们需要交互，它们就可以使用事件来发出信号。

因此，如果指令B需要等待指令A，则可以使用一个或多个属性来指定谁应该等待，谁应该触发事件，和/或事件名称是什么。(当然，这可以扩展到两个以上的指令和一个以上的事件。)一些可能的实现：

<div data-app-grid data-app-pane idc-wait="appPane" idc-event="idc-appGridDone">
<div data-app-grid data-app-pane idc-wait="appPane" idc-emit="appGrid" idc-event="idc-appGridDone">

通过检查属性，appGrid指令可以确定它不需要等待，但它需要发出事件"idc-appGridDone“。类似地，通过检查属性，appPane指令可以确定它在运行之前需要等待"idc-appGridDone“事件。

如果指令找不到任何这些特殊的“指令间通信”/“idc-”属性，它们就会正常运行(没有事件，没有等待)。

依赖于(In)的指令间通信模式诞生了。☺