我有两个控制器,并尝试使用控制器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中没有任何事情发生。可以有人给我提示。
尝试
$scope.$on('contextFooterChange', function(data){
$log.info(data);
});
$rootScope.$broadcast
将事件发送到子范围,因此您需要赶上$scope
级别。
如果你想进入$rootScope
级别,请使用$rootScope.$emit
而不是$rootScope.$broadcast
(我强烈建议因为性能提升)
$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>