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

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

来自评论：

I would bet the reason is that the child controller is not loaded yet when the event is broadcasted - so there is noone there to listen.

并且似乎得到验证：

before I broadcast the event, I am writing to console "broadcasting" & on the first line of child controller, I am writing to "console child controller is loaded". If I check console now, I first see "broadcasting" message and then "child controller is loaded".

查看 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 中的父控制器广播事件

Unable to broadcast event from parent controller in angularjs

angularjs

angularjs-scope

angularjs-routing

angularjs-controller