AngularJS广播混乱 [英] AngularJS Broadcast confusion

问题描述

我有关于广播儿童范围的对象的问题。我有以下工厂：

I have a question regarding broadcasting to children scope objects. I have the following factory:

app.factory('mySharedService', function($rootScope) {
var sharedService = {};

sharedService.alertArray = [];

sharedService.prepForBroadcast = function(alertArray) {
    this.alertArray = alertArray;
    this.broadcastItem();
};

sharedService.broadcastItem = function () {
    $rootScope.$broadcast('handleBroadcast');
};

return sharedService;
});

下面是我父控制器的一个片段：

Here is a snippet of my parent controller:

app.controller('CreateController', function ($scope, mySharedService) {

mySharedService.prepForBroadcast($scope.alerts);

});

这是我的孩子控制器的一个片段：

And here is a snippet of my child controller:

app.controller('ListController', function ($scope, mySharedService) {

$scope.alerts = [];

$scope.$on('handleBroadcast', function () {
    $scope.alerts = mySharedService.alertArray;
});

});

我也注入下面的广播对象到我的控制器：

I also inject the following broadcasting objects into my controllers:

ListController.$inject = ['$scope', 'mySharedService'];
CreateController.$inject = ['$scope', 'mySharedService'];

我的问题：
当broadcastItem方法是从父控制器调用时，它initalizes阵就好了，但$范围内handleBroadcast方法。$上永远不会被调用。我觉得这个方法应该由$ rootScope被调用。$工厂内广播？有什么我缺少这个？

My Question: When the broadcastItem method is called from the parent controller, it initalizes the array just fine, but the handleBroadcast method within $scope.$on is never called. I thought this method should be invoked by the $rootScope.$broadcast within the factory? Is there anything i'm missing on this?

推荐答案

由于父控制器调用服务之前，孩子控制器完成加载它可能会发生。尝试添加虚拟超时：

It might happen because parent controller calls service before child controller finished to load. Try to add dummy timeout:

 $timeout(function () {
   mySharedService.prepForBroadcast($scope.alerts);
 }, 0);

的例子：

JS

演示<大骨节病> 小提琴

var app = angular.module('myModule', []);

function ParentCtrl($scope, $timeout, mySharedService) {

    console.log('firstCtrl');

    $scope.alerts = "Im alert";

     $timeout(function () {
       mySharedService.prepForBroadcast($scope.alerts);
    }, 0);    


}

function ChildCtrl($scope, mySharedService) {

     console.log('secondCtrl');

    $scope.alerts = [];

$scope.$on('handleBroadcast', function () {



    $scope.alerts = mySharedService.alertArray;
});
}

app.factory('mySharedService', function($rootScope) {
var sharedService = {};

sharedService.alertArray = [];

sharedService.prepForBroadcast = function(alertArray) {
    this.alertArray = alertArray;
    this.broadcastItem();
};

sharedService.broadcastItem = function () {
    $rootScope.$broadcast('handleBroadcast');
};

return sharedService;
});

HTML

<div ng-controller="ParentCtrl">
    <div ng-controller="ChildCtrl"> 
        <pre>{{alerts}}</pre>
    </div>
</div>

这篇关于AngularJS广播混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！