Как транслировать событие между двумя контроллерами в AngularJS - PullRequest
Новая
       7

Как транслировать событие между двумя контроллерами в AngularJS

0 голосов
/ 02 сентября 2018

У меня есть два контроллера, и я пытаюсь отправить событие, используя приведенный ниже код от контроллера 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. Может кто-нибудь дать мне подсказку.

Ответы [ 2 ]

0 голосов
/ 02 сентября 2018

Наблюдатель событий $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>
0 голосов
/ 02 сентября 2018

Попробуйте 

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

$rootScope.$broadcast отправляет событие в дочерние области, поэтому вам нужно поймать на уровне $scope.

Если вы хотите попасть на уровень $rootScope, используйте $rootScope.$emit вместо $rootScope.$broadcast (что я настоятельно рекомендую из-за повышения производительности)

...