独立AngularJS指令之间的通信管理独立 [英] Managing communication between independent AngularJS directives independently

问题描述

这更多的是一种组织方式来解决这个问题，而不是直接的解决方案。我的问题本身，如果我有两个指令，这是不依赖于对方，既可以独立工作，发挥应有的功能。但是，如果指令中的一个是present然后另一个需要执行一次，另一个是准备好了。在这种情况下，那么这将是确保它的作品了这种方式，而不需要硬code任何函数调用或逻辑的方式活动？

This is more of an organizational approach to solving this issue rather than a direct solution. My question itself is that if I have two directives which are not dependent on each other and can both work independently to serve their purposes. But if one of the directives is present then the other one needs to execute once the other is ready. In this case then what would be the logical way to make sure that it works out that way without the need to hardcode any function calls or events?

比方说，比如你有一个指令，它建立某种形式的网格：

Lets say for example you have one directive which builds a grid of some sort:

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

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

Then I have another directive that makes the element horizontally scrollable:

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

所以我的HTML的一个例子是这样的：

So an example of my HTML would look like this:

<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 指令已被执行后运行和表已准备就绪。

Basically the appPane directive needs to run after the appGrid directive has been executed and the table is ready.

一个解决方案，我能想到的是看数据，看的时候它已经准备好使用 $范围。$看方法，但是这会带来一个问题，因为变化可以出现多次，这将是糟糕的设计冗余地更新页面，如果多个指令写入正在观看同一范围变量也带来了一个问题。

One solution I can think of is to watch the data to see when it is ready using the $scope.$watch method, but this poses a problem since the change can occur multiple times and this would be bad design to redundantly update the page and it also poses a problem if multiple directives are writing to the same scope variable that is being watched.

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

Another solution is to have the first directive emit an event (something like elementReady) and then have the 2nd directive take over. But what about if the first directive isn't there? Then how would the 2nd directive know when to do it's job? There could be another directive which is basically an empty directive which just fires the event for all other elements, but this is a bit of hack. Also what happens if multiple other directives fire the elementReady event?

还有一个解决方案是创建一个通过共享服务共享的两个指令之间的逻辑的第三个指令。但是这使得第三指令在两个其他指令以及在两者之间共享服务完全依赖。这也需要更多的，不必要的试验code以及实际code键写指令（多$ C $相比于第二溶液C，这将只需要一个加一个$ C $的c线）

One more solution is to create a 3rd directive which shares the logic between the two directives via a shared service. But this makes the 3rd directive fully reliant on both other directives as well as the shared services in between. This also require more, unnecessary testing code as well as actual code to write the directive (much more code compared to the 2nd solution, which would require only one + one lines of code).

任何想法？

推荐答案

我有一个类似的问题。我不能使用优先，由于布线点击元件上之后发生的。我解决它使用$ rootScope。下面是一个简单的例子：

I had a similar problem. I couldn't use priority, since the wiring occurred after clicking on the element. I solved it using $rootScope. Here is a simplified example:

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

在你听'的其他指令的 myEvent 的：

In the other directive you 'listen' for myEvent:

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

这篇关于独立AngularJS指令之间的通信管理独立的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！