javascript - 如何在 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

您一定是指$broadcastand $on（而不是broadcastand 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() {});