在IE11和FireFox31中以不同顺序初始化Angularjs指令

debugcn 发表于 Dev

比诺伊

我有一个指令，其中定义了一个链接函数，在其中添加了一些登录侦听器（自定义）。

并且，各个广播将根据条件从工厂进行。这是我控制器中的功能。但是，当我执行应用程序时，$ rootscope不会使监听器初始化。

我的代码如下

指令：

.directive("tetsdirective",function() {
  return {
    restrict: "E",
    scope: true, 
    replace: true,
    templateUrl: "../xx.htm"
    link: function(scope) {

      $rootScope.$on('loginSuccess', function () {
      alert('login success');}
    }
  }
}

工厂：

.factory('login',function() {
  return {
    listen : function() {
      $rootScope.$broadcast('loginSuccess');
    }
  }
})

控制器：

function applicationCtrl(login) {
  login.listen();
}

的HTML

<body ng-controller="applicationCtrl">
  <div class="container">
    <tetsdirective></tetsdirective>
  </div>
</body>

在控制器中添加了用于指令以及服务/工厂的依赖关系。这在IE11中效果很好。即，在进行广播时，如果我们检查$ rootscope侦听器，则会添加列表器，它也会向我发出警报。

但是，当我从Firefox -v31尝试使用它时，广播时不会添加侦听器，并且在调试时，仅在广播之后才进行指令的初始化。

我想知道为什么两个浏览器的行为都不同。我在这里做错什么了吗？

请注意：注入了所有必需的依赖项，包括$ Rootscope。IE / FF中没有显示错误

比诺伊

发现了问题，由于执行顺序，这无法正常工作。

当控制器启动服务进行广播时，链接功能可能尚未将侦听器注册到$ root。

在这里，我只能看到的选择是从指令本身注册侦听器，而不是从链接函数进行注册。

.directive("tetsdirective",function() {
   $rootScope.$on('loginSuccess', function () 
            {
               alert('login success');
             }
 return {
    restrict: "E",
    scope: true, 
    replace: true,
    templateUrl: "../xx.htm"

       }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。