独立管理独立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>

基本上,appPane指令需要在执行appGrid指令并且表准备就绪后运行.

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

另一个解决方案是让第一个指令发出一个事件(类似于elementReady),然后让第二个指令接管.但是,如果第一个指令不存在呢？那么第二指令怎么会知道什么时候做它的工作呢？可能有另一个指令基本上是一个空指令,只是为所有其他元素触发事件,但这是一个黑客攻击.如果多个其他指令触发elementReady事件,会发生什么？

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

有任何想法吗？

Answer 1

查看指令的优先级属性。

这是角度文档中准确描述的副本：

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

你应该能够找到它

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

在编写指令（长版） ---指令定义对象部分下。

希望这能回答您的问题。