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

前端之家收集整理的这篇文章主要介绍了独立管理独立AngularJS指令之间的通信前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这更像是解决此问题的组织方法,而不是直接解决方案.我的问题本身就是如果我有两个指令不相互依赖,并且可以独立工作以达到其目的.但是如果其中一个指令存在,那么另一个指令需要在另一个指令就绪后执行.在这种情况下,那么在不需要对任何函数调用或事件进行硬编码的情况下,确保以这种方式运行的逻辑方法是什么?

让我们假设您有一个指令可以构建某种类型的网格:

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

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

angular.module('App').directive('appPane',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指令完全依赖于其他指令以及它们之间的共享服务.这还需要更多,不必要的测试代码以及​​编写指令的实际代码(与第二个解决方案相比,需要更多代码,这只需要一行代码).

有任何想法吗?

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

以下是angular docs的确切描述的副本:

priority – When there are multiple directives defined on a single DOM element,sometimes it is necessary to specify the order in which
the directives are applied. The priority is used to sort the
directives before their compile functions get called. Higher priority
goes first. The order of directives within the same priority is
undefined.

你应该能够找到它

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

根据Writing指令(长版)—指令定义对象部分.

希望这能回答你的问题.

猜你在找的Angularjs相关文章