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

问题描述 投票:0回答:2

我有两个控制器,并尝试使用控制器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中没有任何事情发生。可以有人给我提示。

angularjs angularjs-scope
2个回答
0
投票

尝试

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

$rootScope.$broadcast将事件发送到子范围,因此您需要赶上$scope级别。

如果你想进入$rootScope级别,请使用$rootScope.$emit而不是$rootScope.$broadcast(我强烈建议因为性能提升)


0
投票

$on事件监视器产生两个论点; eventdata

̶$̶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被摧毁时它会被自动摧毁。

DEMO

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>
© www.soinside.com 2019 - 2024. All rights reserved.