跨控制器发射数据

Question

我试图按照此所示例由角创作者Vojta开发提供。 但是，我似乎无法使发射正常工作。 这是我的小提琴： 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

您的代码中似乎有一些错别字。 同样，这两个控制器也不具有相同的作用域。 因此，如果要在事件之间广播事件，则需要使用根范围：

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", ...);