在AngularJS中控制器之间的正确通信方式是什么？

Question

控制人员之间的正确通信方式是什么？

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

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);
    }
}

Answer 1

所以，现在你可以：

• 从$rootscope
中使用 $broadcast
• 使用$on从需要了解事件的本地$scope监听

以下原始答案

然而，在控制器内部使用它时有一个问题。如果从控制器中直接绑定到$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);
        }
    ]);

我想说，这并不是一个真正的角度特定的事情，因为它也适用于其他EventBus实现，您必须清理资源。

monkey修补$rootscope以提供这样的$onrootscope方法的最干净的方法是通过一个decorator（运行块可能也能很好地完成它，但是pssst，不要告诉任何人）

为了确保在对$scope进行枚举时$onrootscope属性不会意外显示，我们使用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核心内解决这个问题。这里有一个讨论:https://github.com/angular/angular.js/issues/4574

下面是一个jsperf，它显示了在一个只有100个$scope的良好场景中，$broadcast会给表带来多少perf影响。