控制器之间的正确通信方式是什么?

我目前正在使用一个可怕的软糖涉及窗口:

function StockSubgroupCtrl($scope, $http) {
    $scope.subgroups = [];
    $scope.handleSubgroupsLoaded = function(data, status) {
        $scope.subgroups = data;
    }
    $scope.fetch = function(prod_grp) {
        $http.get('/api/stock/groups/' + prod_grp + '/subgroups/').success($scope.handleSubgroupsLoaded);
    }
    window.fetchStockSubgroups = $scope.fetch;
}

function StockGroupCtrl($scope, $http) {
    ...
    $scope.select = function(prod_grp) {
        $scope.selectedGroup = prod_grp;
        window.fetchStockSubgroups(prod_grp);
    }
}

当前回答

GridLinked发布了一个PubSub解决方案,看起来设计得很好。该服务可以在这里找到。

还有他们的服务图表:

其他回答

实际上,使用emit和broadcast效率很低,因为事件会在作用域层次结构中上下冒泡,这很容易导致复杂应用程序的性能瓶颈。

我建议使用服务。以下是我最近在我的一个项目https://gist.github.com/3384419中实现它的方法。

基本思想——将发布/事件总线注册为服务。然后在需要订阅或发布事件/主题的地方注入事件总线。

上面的答案是@zumalifeguard提到的一个Angular问题,这个问题已经不存在了(至少在>1.2.16版本和“可能更早”)。但我读了所有这些答案,却没有一个实际的解决方案。

在我看来,现在的答案应该是

使用$rootScope中的$broadcast 从需要了解事件的本地$作用域使用$on进行监听

所以要发表

// EXAMPLE PUBLISHER
angular.module('test').controller('CtrlPublish', ['$rootScope', '$scope',
function ($rootScope, $scope) {

  $rootScope.$broadcast('topic', 'message');

}]);

和订阅

// EXAMPLE SUBSCRIBER
angular.module('test').controller('ctrlSubscribe', ['$scope',
function ($scope) {

  $scope.$on('topic', function (event, arg) { 
    $scope.receiver = 'got your ' + arg;
  });

}]);

普伦克斯

常规$scope语法(如上所示) new Controller As语法

如果您在本地$作用域上注册了侦听器,当关联的控制器被删除时,它将被$destroy自身自动销毁。

你可以通过使用angular事件$emit和$broadcast来实现。据我们所知,这是最好、高效和有效的方法。

首先,我们从一个控制器调用一个函数。

var myApp = angular.module('sample', []);
myApp.controller('firstCtrl', function($scope) {
    $scope.sum = function() {
        $scope.$emit('sumTwoNumber', [1, 2]);
    };
});
myApp.controller('secondCtrl', function($scope) {
    $scope.$on('sumTwoNumber', function(e, data) {
        var sum = 0;
        for (var a = 0; a < data.length; a++) {
            sum = sum + data[a];
        }
        console.log('event working', sum);

    });
});

你也可以用$rootScope代替$scope。相应地使用你的控制器。

这就是我使用工厂/服务和简单依赖注入(DI)的方法。

myApp = angular.module('myApp', [])

# PeopleService holds the "data".
angular.module('myApp').factory 'PeopleService', ()->
  [
    {name: "Jack"}
  ]

# Controller where PeopleService is injected
angular.module('myApp').controller 'PersonFormCtrl', ['$scope','PeopleService', ($scope, PeopleService)->
  $scope.people = PeopleService
  $scope.person = {} 

  $scope.add = (person)->
    # Simply push some data to service
    PeopleService.push angular.copy(person)
]

# ... and again consume it in another controller somewhere...
angular.module('myApp').controller 'PeopleListCtrl', ['$scope','PeopleService', ($scope, PeopleService)->
  $scope.people = PeopleService
]

编辑:在这个回答中解决的问题已经在angular.js 1.2.7版本中解决了。$broadcast现在避免在未注册的作用域冒泡,并且运行速度与$emit一样快。

所以,现在你可以:

使用$rootScope中的$broadcast 从需要了解事件的本地$作用域使用$on进行监听


原始答案如下

我强烈建议不要使用$rootScope。$broadcast + $scope。$on而不是$rootScope。发出+ rootScope。美元美元。前者会导致严重的性能问题,正如@numan所提出的那样。这是因为事件会通过所有范围扩散。

然而,后者(使用$rootScope。$emit + $rootScope.$on)不会受此影响,因此可以用作快速通信通道!

来自$emit的angular文档:

通过作用域层次结构向上分发事件名称,并通知已注册对象

因为$rootScope上面没有作用域,所以不会发生冒泡。使用$rootScope.$emit()/ $rootScope.$on()作为EventBus是完全安全的。

然而,当从控制器内部使用它时,有一个问题。如果你直接从控制器中绑定到$rootScope.$on(),当你的本地$scope被破坏时,你必须自己清理绑定。这是因为控制器(与服务相反)可以在应用程序的生命周期中被实例化多次,这将导致绑定,最终在所有地方创建内存泄漏:)

要取消注册,只需监听$scope的$destroy事件,然后调用由$rootScope.$on返回的函数。

angular
    .module('MyApp')
    .controller('MyController', ['$scope', '$rootScope', function MyController($scope, $rootScope) {

            var unbind = $rootScope.$on('someComponent.someCrazyEvent', function(){
                console.log('foo');
            });

            $scope.$on('$destroy', unbind);
        }
    ]);

我想说,这并不是angular特有的事情,因为它也适用于其他EventBus实现,你必须清理资源。

但是,对于这些情况,您可以让您的生活变得更轻松。例如,你可以给$rootScope打补丁,并给它一个$onRootScope,订阅在$rootScope上发出的事件,但也可以在本地$scope被破坏时直接清理处理程序。

猴子修补$rootScope以提供这样的$onRootScope方法的最干净的方法是通过装饰器(一个运行块可能也会做得很好,但pssst,不要告诉任何人)

为了确保$onRootScope属性在枚举$scope时不会出现意外情况,我们使用Object.defineProperty()并将enumerable设置为false。请记住,你可能需要一个ES5垫片。

angular
    .module('MyApp')
    .config(['$provide', function($provide){
        $provide.decorator('$rootScope', ['$delegate', function($delegate){

            Object.defineProperty($delegate.constructor.prototype, '$onRootScope', {
                value: function(name, listener){
                    var unsubscribe = $delegate.$on(name, listener);
                    this.$on('$destroy', unsubscribe);

                    return unsubscribe;
                },
                enumerable: false
            });


            return $delegate;
        }]);
    }]);

有了这个方法,上面的控制器代码可以简化为:

angular
    .module('MyApp')
    .controller('MyController', ['$scope', function MyController($scope) {

            $scope.$onRootScope('someComponent.someCrazyEvent', function(){
                console.log('foo');
            });
        }
    ]);

因此,作为这一切的最终结果,我强烈建议您使用$rootScope。$emit + $scope.$onRootScope。

顺便说一句,我正试图说服angular团队在angular core内部解决这个问题。这里有一个讨论:https://github.com/angular/angular.js/issues/4574

下面是一个jsperf,它展示了$broadcast在一个只有100个$scope的合适场景中所带来的性能影响。

http://jsperf.com/rootscope-emit-vs-rootscope-broadcast