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

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

例如，假设您有一个指令，它构建某种网格：

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>

{{cell.data}

基本上，

appPane

指令需要在执行

appGrid

指令并准备好表格后运行

我能想到的一个解决方案是使用

$scope.$watch

方法观察数据，查看数据何时准备就绪，但这会带来一个问题，因为更改可能会发生多次，冗余更新页面的设计将很糟糕，如果多个指令正在写入正在监视的同一范围变量，这也会带来一个问题

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

elementReady

事件，会发生什么情况

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

---

有什么想法吗

查看指令的优先级属性

以下是angular docs的准确描述副本：

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

你应该能在里面找到它

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

---

希望这能回答你的问题。

我也有类似的问题。我无法使用优先级，因为在单击元素后发生了连接。我用$rootScope解决了这个问题。以下是一个简化的示例：

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

在另一个指令中，您“侦听”myEvent：

---

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

由于只有指令的用户（即编写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）的指令间通信模式”诞生了。☺

是的，我认为优先级属性可以工作，尽管我从未使用过它。我来看看。谢谢：）

<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">