javascript – 使用发布/订阅的指令之间的Angularjs事件通信

我想用角度事件系统创建一个发布/订阅机制.

angular.module("app",[]);

angular.module("app").directive("first",function($rootScope){
        return {
          template: "First Directive",link:function(scope,element,attribute){
               $rootScope.$broadcast("OnFirstDirectiveCreated",{
                "message": "I'm first directive"
            });
      }
    }
})

angular.module("app").directive("second",function($rootScope){
        return {
          template: "Second Directive",attribute){
            var handler = $rootScope.$on("OnFirstDirectiveCreated",function (event,args) {
                  console.log("First Directive Message: " + args.message);
            });
      }
    }
})

如果我设置这样的HTML文档,控制台中不会显示任何消息：

<div ng-app="app">
  <first></first>
  <second></second>
</div>

如果我更改订单第一和第二,消息wirite在控制台.

<div ng-app="app">
  <second></second>
  <first></first>
</div>

但是我需要第一个指令或内部指令.

<div ng-app="app">
  <first></first>
  <second></second>
</div>

<div ng-app="app">
  <first>
      <second></second>
  </first>
</div>

我尝试过$rootScope.$broadcast和$rootScope.$emit,但没有下咽.

Working DEMO

解决方法

这是绝对正确的角度行为.

在第一个例子中：

<first></first>
<second></second>

Angular为第一个标签创建一个指令,并立即发送事件,但第二个指令尚未创建.

在第二个例子中：

<first></first>
<second></second>

在这里,您首先订阅一个事件,之后第一个指令发送消息.因此,第二个指令接受一个事件.

第三个例子：

<first>
   <second></second>
</first>

这种情况,以及第一个例子将不会奏效.

解：
一个解决方案是在第一个指令中设置超时,以便在创建后不立即发送事件.如果第二个参数为$timeout,则不提供延迟,则默认行为是在DOM完成渲染后执行该函数：

angular.module("app").directive("first",function($rootScope,$timeout) {
  return {
    template: "First Directive",link: function(scope,attribute) {
      $timeout(function() {
        $rootScope.$broadcast("OnFirstDirectiveCreated",{
          "message": "I'm first directive"
        })
      });
    }
  }
});

Demo

原文地址：https://www.jb51.cc/js/155217.html