如何在 AngularJS 中将消息从一个控制器发送到另一个控制器？答案

【问题标题】：How can I send a message from one controller to another in AngularJS?如何在 AngularJS 中将消息从一个控制器发送到另一个控制器？
【发布时间】：2013-07-20 11:06:01
【问题描述】：

我有以下设置：

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 都进行了尝试

【问题讨论】：

其实你需要用'$on'代替'on'和$broadcast代替broadcast

标签： javascript angularjs

【解决方案1】：

您一定是指$broadcast 和$on（而不是broadcast 和on），即：

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

值得注意的是，$broadcast 用于将事件委托给子作用域或同级作用域，而$emit 会将事件向上冒泡到作用域的父作用域，因此；

在选择$broadcast（而不是$emit）时，一个应该注射$on（如您的 did em>）或致电接收者@ 987654332隔离范围，可以是调度程序的子范围。

有关$emit 和$broadcast 的详细说明，请参阅this post。

【讨论】：

【解决方案2】：

如果事件侦听器在子范围中：$scope.$broadcast('MyEvent', args);

如果事件侦听器在父范围中：$scope.$emit('MyEvent', args);

您可以通过在 $rootScope 上使用 $broadcast 来避免任何混淆，因为 $rootScope 是 Angular 应用程序中所有范围的父级：$rootScope.$broadcast('MyEvent', args);

无论您使用 $emit 还是 $broadcast，接收控制器都会使用 $scope.$on('MyEvent', function() {}); 进行侦听

【讨论】：

我认为情况正好相反。 $emit 从子作用域向上发送到父作用域。 $broadcast 从父母传给孩子。见docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit
你说得对——我写的是监听器而不是发声器，但我在这里修复了它，所以它们被颠倒了。谢谢！

【解决方案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);
    });

【讨论】：

【解决方案4】：

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

来自第一个控制器，并在第二个控制器中接收：

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

【讨论】：