如何在AngularJS中從一個控制器向另一個控制器發送消息？

Question

我有以下設置：

stApp.controller('AdminTableController', ['$rootScope', '$scope', 'gridService', 
            function ($rootScope, $scope, gridService) {
    $scope.$watch('tableData.$pristine', function (newValue) {
        $rootScope.broadcast("tableDataUpdated", {
            state: page.$pristine
        });
    });
}])

stApp.controller('AdminGridController', ['$rootScope', '$scope', 'gridService',
            function ($rootScope, $scope, gridService) {
    $rootScope.on("tableDataUpdated", function (args) {
        //args.state would have the state.
        alert(args.state);
    });
}])

當我運行此代碼時，我收到一條消息：

Object #<Object> has no method 'on'

請注意，我嘗試使用$ rootScope.on和$ scope.on

Answer 1

你必須意味着$broadcast和$on （而不是broadcast和on ），即：

$rootScope.$broadcast("tableDataUpdated", { state: page.$pristine });
// ...
$rootScope.$on("tableDataUpdated", function (args) {
// ...

值得注意的是， $broadcast用於將事件委托給子節點或兄弟節點范圍，而$emit會將事件向上傳遞給范圍的父節點，因此;

當選擇$broadcast （而不是$emit ），你要么注入根范圍為搭售$on （為你做了很好），或致電$on接收器上的隔離范圍，無論是調度員的一個子范圍。

有關$emit和$broadcast詳細信息 ，請參閱此文章 。

Answer 2

如果事件監聽器在子范圍內 ： $scope.$broadcast('MyEvent', args);

如果事件監聽器位於父作用域中 ： $scope.$emit('MyEvent', args);

你可以通過在$ rootScope上使用$ broadcast來避免任何混淆，因為$ rootScope是Angular應用程序中所有作用域的父級： $rootScope.$broadcast('MyEvent', args);

無論你使用$ emit還是$ broadcast，接收控制器都會監聽$scope.$on('MyEvent', function() {});

Answer 3

 $rootScope.on("tableDataUpdated", function (args) {
        //args.state would have the state.
        alert(args.state);
    });

應該

 $rootScope.$on("tableDataUpdated", function (args) {
        //args.state would have the state.
        alert(args.state);
    });

Answer 4

$scope.$emit('MyEvent', args);

從第一個控制器，並在第二個控制器接收：

$scope.$on('MyEvent', function() {});