Question

我有两个控制器，并尝试使用控制器A的以下代码发送事件：

$scope.$watch("showContextFooter", function (newValue, oldValue) {
        $rootScope.$broadcast('contextFooterChange', {isOpen: $scope.showContextFooter});
    });

在控制器B中，我试图通过这种方式捕获此事件：

$rootScope.$on('contextFooterChange', function(data){
        $log.info(data);
    });

//OR

    $scope.$on("$destroy",$scope.$on("contextFooterChange", function (e) {
        $log.info(e);
    }));

但是在控制器B中没有发生任何事件。我尝试调试并看到控制器A广播，但是在控制器B中什么也没发生。有人可以给我提示吗。

Answer 1

尝试

$scope.$on('contextFooterChange', function(data){
    $log.info(data);
});

$rootScope.$broadcast将事件发送到子作用域，因此您需要进入$scope级别。

如果您想进入$rootScope级别，请使用$rootScope.$emit而不是$rootScope.$broadcast（由于性能提高，我强烈建议使用此）

Answer 2

$on事件观察器产生两个参数。 event和data：

̶$̶r̶o̶o̶t̶S̶c̶o̶p̶e̶.̶$̶o̶n̶(̶'̶c̶o̶n̶t̶e̶x̶t̶F̶o̶o̶t̶e̶r̶C̶h̶a̶n̶g̶e̶'̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶d̶a̶t̶a̶)̶{̶  
$scope.$on('contextFooterChange', function(event,data){
    $log.info(data);
});

另外，最好将$on监视程序放在$scope上，然后在销毁其$scope时将销毁它。

演示

angular.module("app",[])
.controller("ctrlA", function($scope) {
    $scope.$watch("showContextFooter", function (newValue, oldValue) {
        $scope.$root.$broadcast('contextFooterChange', {isOpen: $scope.showContextFooter});
    });
})
.controller("ctrlB", function($scope,$log) {
    $scope.$on('contextFooterChange', function(event,data){
        $scope.message = data;
        $log.info(data);
    });
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
    <div ng-controller="ctrlA">
        <input type="checkbox" ng-model="showContextFooter">showContextFooter<br>
    </div>
    <div ng-controller="ctrlB">
        message={{message}}
    </div>
</body>

如何在AngularJS中的两个控制器之间广播事件

2 个答案:

演示