Question

我试图关注Angular创作者Vojta提供的this示例。但是，我似乎无法让发射器正常工作。这是我的小提琴：http://jsfiddle.net/nopctoday/fp2y3jur/2/

<div ng-module="myapp">
    <div ng-controller="ControllerZero">
        <button ng-click="pass_data()">BROADCAST</button>
    </div>

    <div ng-controller="ControllerOne">
        {{data}}
    </div>
</div>

和简单的js

var myModule = angular.module('myapp', []);

app.controller('ControllerZero',['$scope',function($scope){
    $scope.pass_data = function() {
        $scope.$emit('broadcasting', 'it succeeded!');
    };
}]);

app.controller('ControllerOne',['$scope', function($scope){
    $scope.data = "";
    $scope.$on('broadcasting', function(event, data) {
        $scope.data = data;
    });
}]);

Answer 1

$emit将事件向上扩展到范围层次结构，包括当前范围。

$broadcast向下发送事件范围层次结构，包括当前范围。

在您的情况下，ControllerZero的范围和ControllerOne的范围是兄弟姐妹，因此$scope.$emit未达到兄弟范围。

根据您想要达到的各种听众，您可以这样做：

<强>＃1

$scope.$root.$emit("eventName", ...); // or $rootScope

将覆盖$rootScope的听众：

$rootScope.$on("eventName", ...)

或＃2 ，您可以从根网播出：

$scope.$root.$broadcast("eventName", ...)

将覆盖所有听众

$scope.$on("eventName", ...)

Answer 2

您的代码中似乎有一些拼写错误。 2控制器也不共享相同的范围。因此，如果要在它们之间广播事件，则需要使用根范围：

var app = angular.module('myapp', []);

app.controller('ControllerZero', ['$scope', function($scope) {
    $scope.pass_data = function() {
        $scope.$emit('broadcasting', 'it succeeded!');
    };
}]);

app.controller('ControllerOne', ['$scope', '$rootScope', function($scope, $rootScope) {
    $scope.data = null;
    $rootScope.$on('broadcasting', function(data, args) {
        $scope.data = args;
    });
}]);

这里有一个示例小提琴：http://jsfiddle.net/3epo5ckz/1/

Answer 3

在这种情况下，问题是$emit在范围链上发送事件。它的伴侣$broadcast向范围链发送信息。您提供的示例似乎只在某些情况下才有效。我过去完成这个的方式是这样的：

ctrlOne.js

angular.module('app').controller(function($rootScope) {
  $rootScope.$broadcast('broadcasting', 'message');
});

ctrlTwo.js

angular.module('app').controller(function($scope) {
  $scope.$on('broadcasting', function(msg) {
    // should output 'message'
    console.log(msg);
  });
});

你也可以使用这样的服务为这个过程添加别名：

messenger.service.js

angular.module('app').factory(function($rootScope) {
  return {
    send: $rootScope.$broadcast,
    on: $rootScope.$on
  };
}

您可以在$on，$emit和$broadcast上阅读Angular的文档。

Answer 4

如果您有一个大型应用程序，并且不希望使用来自根作用域的消息污染它，您也可以使用您的父进行广播。这样只有你的兄弟姐妹和儿童控制器才会收到这个事件。

$scope.$parent.$broadcast("eventName", ...);

跨控制器发送数据

4 个答案: