如何用AngularJS将消息从一个控制器发送到另一个控制器?

I have the following set up:

我有以下设置:

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);
    });
}])

When I run this code I am getting a message:

当我运行这段代码时，我收到一条消息:

Object #<Object> has no method 'on'

Note that I tried this with both $rootScope.on and $scope.on

注意，我尝试了这两个$rootScope。在美元scope.on

4 个解决方案

#1

You must have meant $broadcast and $on (rather than broadcast and on), that is:

你一定是指$broadcast和$on(而不是broadcast and on)，也就是说:

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

It's worth noting that $broadcast is used to delegate events to child or sibling scopes, whereas $emit will bubble events upwards to the scope's parents, hence;

值得注意的是，$broadcast用于将事件委托给子作用域或兄弟作用域，而$emit将气泡事件向上传递给作用域的双亲;

When choosing $broadcast (and not $emit), one should either inject the root scope for tying the $on (as you nicely did) or call $on on the receiver's isolated scope, be it a child scope of the dispatcher.

当选择$broadcast(而不是$emit)时，您应该注入用于绑定$on的根范围(正如您所做的那样)，或者在接收方的隔离范围上调用$on，不管它是分派器的子范围。

See this post for elaboration on $emit and $broadcast.

有关$emit和$broadcast的详细介绍，请参阅本文。

#2

If the event listener is in a child scope: $scope.$broadcast('MyEvent', args);

如果事件侦听器位于子范围:$scope。美元广播(MyEvent,args);

If the event listener is in a parent scope: $scope.$emit('MyEvent', args);

如果事件侦听器位于父范围:$scope。美元发出(MyEvent,args);

You could avoid any confusion by using $broadcast on $rootScope, since $rootScope is the parent of all scopes in an Angular application: $rootScope.$broadcast('MyEvent', args);

通过在$rootScope上使用$broadcast可以避免任何混淆，因为$rootScope是一个有棱角的应用程序中的所有范围的父类:$rootScope。美元广播(MyEvent,args);

Whether you use $emit or $broadcast, the receiving controller listens with $scope.$on('MyEvent', function() {});

无论您使用$emit还是$broadcast，接收控制器都使用$scope进行监听。美元(MyEvent的函数(){ });

#3

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

should be

应该是

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

#4

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

from first controller, and receive in second controller:

来自第一控制器，接收来自第二控制器:

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

#1