gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 18:11:14 25 4
gpt4 key购买 nike

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

举例来说,假设您有一个伪指令可构建某种形式的网格:

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条指令完全依赖于其他两条指令以及它们之间的共享服务。这还需要更多,不必要的测试代码以及​​编写指令的实际代码(与第二种解决方案相比,它只需要一行代码即可获得更多的代码)。

有任何想法吗?

最佳答案

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

这是angular文档的确切描述的副本:

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

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

希望这能回答您的问题。

关于angularjs - 独立管理独立AngularJS指令之间的通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13639399/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com