angularjs指令使用templateUrl - 初始化序列

时间:2013-09-27 19:01:04

标签: javascript angularjs angularjs-directive

我想要在一个控制器中发送广播事件并让指令的控制器接收消息。事件在控制器启动时立即发送,问题在于因为指令正在使用templateUrl加载视图,所以它是异步发生的,因此在指令控制器初始化之前广播事件。如果视图位于主页面主体中,则不会发生此问题,但我想控制器初始化顺序仍然存在问题。

我在主控制器中使用以下代码:

$rootScope.$broadcast("event:myevent");

我在这里重现了这个问题:http://jsfiddle.net/jugglingcats/7Wf8N

您可以在Javascript控制台中看到主控制器在指令的控制器之前被初始化,并且它永远不会看到该事件。

所以我的问题是,在广播事件之前是否有办法等待所有控制器初始化?

非常感谢

2 个答案:

答案 0 :(得分:1)

我创建了一个工作版本。我实际上觉得这是一种非常不干净的方式,但我无法想出更好的东西:http://jsfiddle.net/7Wf8N/3/

我所做的是:在指令中我添加了一些代码,这些代码会在初始化时增加$ rootScope中的计数器。我使用计数器,因为正如你所说,你想要等待多个控制器:

$rootScope.initialized = ( $rootScope.initialized||0 ) +1;

在“RegularCtrl”中,我在此计数器上添加了一个监视器,如果计数器达到正确的值(一切都已初始化),我发送事件:

$rootScope.$watch('initialized', function() {
    if ( $rootScope.initialized == 1 ) {
        $rootScope.$broadcast("event:myevent");        
    }
});

答案 1 :(得分:1)

你是ng-view吗?如果是这样,您可以使用$viewContentLoaded活动。这将在所有dom加载后触发。

http://docs.angularjs.org/api/ngRoute.directive:ngView

function MyCtrl($scope, $rootScope) {
  $scope.$on('$viewContentLoaded', function() {
      $rootScope.$broadcast('event:myevent');
  });
}

如果你没有使用ng-view,你可以设置一个变量并使用数据绑定到你的指令。

相关问题