Question

我有两个控制器有父子关系：

这是父控制器的路由：

angular.module('app')
  .config(function ($stateProvider) {
    $stateProvider
      .state('data-show', {
        url: '/data',
        templateUrl: 'app/data.html',
        controller: 'DataCtrl'
      });
  });

这是父控制器的HTML：

<div class="block-header">
   ...
   ...
    <div ng-include="'components/child_page.html'"></div>
</div>

父控制器的代码：

angular.module('app')
  .controller('DataCtrl', function ($scope) {

      $rootScope.$broadcast('someEvent', [1,2,3]);
 });

子控制器是child_page.html页面的一部分，该页面使用ng-include标记包含在父页面中，如上所示。

这是子控制器的外观：

angular.module('app')
    .controller('childCtrl', function ($scope) {

        $scope.$on('someEvent', function(event, mass) {
            console.log('EVENT CALLED');
        });
  });

子页面的HTML：

<div ng-controller="childCtrl">
    <div id="myGrid"></div>
</div>

但即使我从父控制器广播事件，也不会在子页面中调用该事件。

Answer 1

来自评论：

我敢打赌原因是当广播事件时子控制器还没有加载 - 所以没有人可以听。

似乎有待验证：

在我播放活动之前，我正在写控制台＆＃34;广播＆＃34; ＆安培;在子控制器的第一行，我正在写＆＃34;控制台子控制器被加载＆＃34;。如果我现在检查控制台，我首先看到＆＃34;广播＆＃34;消息然后＆＃34;子控制器被加载＆＃34;。

查看ng-include的文档，它会在加载内容时发出$includeContentLoaded事件。所以第一种方法是：

// parent controller:
$rootScope.$on('$includeContentLoaded', function() {
    $rootScope.$broadcast('someEvent', [1,2,3]);
});

稍后可以使用事件的参数对其进行优化。

Answer 2

我正在回答我自己的问题，我希望它能帮到某个人。

正如Nikos Paraskevopoulos所建议的那样，当我尝试从父控制器广播事件时，未加载子控制器。

所以我将父控制器更改为：

angular.module('app')
  .controller('DataCtrl', function ($scope,$timeout) {

      $timeout(function () {
        $scope.$broadcast('someEvent', [1, 2, 3]);
      }, 300);

 });

我添加了300毫秒的延迟，允许子控制器加载。

无法在angularjs中从父控制器广播事件

2 个答案: