288

我有一个具有不同视图的 footerController 和 codeScannerController。

angular.module('myApp').controller('footerController', ["$scope", function($scope) {}]);

angular.module('myApp').controller('codeScannerController', ["$scope", function($scope) {
console.log("start");
$scope.startScanner = function(){...

当我单击<li>footer.html 中的a 时，我应该在codeScannerController 中获得此事件。

<li class="button" ng-click="startScanner()">3</li>

我认为它可以用$onand来实现$broadcast，但我不知道如何也无法在任何地方找到示例。

4

4 回答 4

646

如果你想$broadcast使用$rootScope：

$scope.startScanner = function() {

    $rootScope.$broadcast('scanner-started');
}

然后接收，使用$scope你的控制器：

$scope.$on('scanner-started', function(event, args) {

    // do what you want to do
});

如果您愿意，您可以在以下情况下传递参数$broadcast：

$rootScope.$broadcast('scanner-started', { any: {} });

然后接收它们：

$scope.$on('scanner-started', function(event, args) {

    var anyThing = args.any;
    // do what you want to do
});

Scope docs中的文档。

于 2013-10-18T10:07:07.850 回答
103

$on()首先，对$broadcast()和$emit()的简短描述：

  • .$on(name, listener)- 监听给定的特定事件name
  • .$broadcast(name, args)$scope- 通过所有孩子广播一个事件
  • .$emit(name, args)-$scope向所有父级发送事件，包括$rootScope

基于以下 HTML（请参见此处的完整示例）：

<div ng-controller="Controller1">
    <button ng-click="broadcast()">Broadcast 1</button>
    <button ng-click="emit()">Emit 1</button>
</div>

<div ng-controller="Controller2">
    <button ng-click="broadcast()">Broadcast 2</button>
    <button ng-click="emit()">Emit 2</button>
    <div ng-controller="Controller3">
        <button ng-click="broadcast()">Broadcast 3</button>
        <button ng-click="emit()">Emit 3</button>
        <br>
        <button ng-click="broadcastRoot()">Broadcast Root</button>
        <button ng-click="emitRoot()">Emit Root</button>
    </div>
</div>

触发的事件将遍历$scopes如下：

  • 广播 1 - 只会被控制器 1 看到$scope
  • $scopeEmit 1 -将被控制器 1 看到$rootScope
  • 广播 2 - 将被控制器 2 和$scope控制器 3看到$scope
  • $scopeEmit 2 -将被控制器 2 看到$rootScope
  • 广播 3 - 只会被控制器 3 看到$scope
  • 发射 3 - 将被控制器 3 看到，然后$scope控制器 2$scope$rootScope
  • 广播根 - 将被所有控制器（1、2 然后 3）$rootScope看到$scope
  • Emit Root - 只会被$rootScope

用于触发事件的 JavaScript（同样，您可以在此处查看一个工作示例）：

app.controller('Controller1', ['$scope', '$rootScope', function($scope, $rootScope){
    $scope.broadcastAndEmit = function(){
        // This will be seen by Controller 1 $scope and all children $scopes 
        $scope.$broadcast('eventX', {data: '$scope.broadcast'});

        // Because this event is fired as an emit (goes up) on the $rootScope,
        // only the $rootScope will see it
        $rootScope.$emit('eventX', {data: '$rootScope.emit'});
    };
    $scope.emit = function(){
        // Controller 1 $scope, and all parent $scopes (including $rootScope) 
        // will see this event
        $scope.$emit('eventX', {data: '$scope.emit'});
    };

    $scope.$on('eventX', function(ev, args){
        console.log('eventX found on Controller1 $scope');
    });
    $rootScope.$on('eventX', function(ev, args){
        console.log('eventX found on $rootScope');
    });
}]);
于 2015-06-24T09:51:48.530 回答
27

您应该知道的一件事是 $ 前缀指的是 Angular 方法，$$ 前缀指的是您应该避免使用的 Angular 方法。

下面是一个示例模板及其控制器，我们将探索 $broadcast/$on 如何帮助我们实现我们想要的。

<div ng-controller="FirstCtrl">
    <input ng-model="name"/> 
    <button ng-click="register()">Register </button>
</div>

<div ng-controller="SecondCtrl">
    Registered Name: <input ng-model="name"/> 
</div>

控制器是

app.controller('FirstCtrl', function($scope){
    $scope.register = function(){

    }
});

app.controller('SecondCtrl', function($scope){

});

我的问题是，当用户单击注册时，如何将名称传递给第二个控制器？您可能会想出多种解决方案，但我们要使用的解决方案是使用 $broadcast 和 $on。

$broadcast 与 $emit

我们应该使用哪个？$broadcast 将向下引导到所有子 dom 元素，而 $emit 将反向引导到所有祖先 dom 元素。

避免在 $emit 或 $broadcast 之间做出决定的最佳方法是从 $rootScope 进行通道并将 $broadcast 用于其所有子级。由于我们的 dom 元素是同级元素，这使我们的案例变得更加容易。

添加 $rootScope 并让 $broadcast

app.controller('FirstCtrl', function($rootScope, $scope){
    $scope.register = function(){
        $rootScope.$broadcast('BOOM!', $scope.name)
    }
});

请注意，我们添加了 $rootScope，现在我们正在使用 $broadcast(broadcastName, arguments)。对于广播名称，我们想给它一个唯一的名称，这样我们就可以在我们的 secondCtrl 中捕获该名称。我选择了BOOM！纯娱乐。第二个参数“参数”允许我们将值传递给监听器。

接收我们的广播

在我们的第二个控制器中，我们需要设置代码来收听我们的广播

app.controller('SecondCtrl', function($scope){
  $scope.$on('BOOM!', function(events, args){
    console.log(args);
    $scope.name = args; //now we've registered!
  })
});

真的就是这么简单。现场示例

实现类似结果的其他方法

尽量避免使用这套方法，因为它既不高效也不易于维护，但它是解决您可能遇到的问题的简单方法。

您通常可以通过使用服务或简化控制器来做同样的事情。我们不会详细讨论这个问题，但我想我只是为了完整性而提到它。

最后，请记住一个非常有用的广播是“$destroy”，您可以再次看到 $ 表示它是由供应商代码创建的方法或对象。无论如何，当控制器被销毁时会广播 $destroy，您可能想听听这个以了解您的控制器何时被移除。

于 2015-03-01T23:58:19.693 回答
1 
//Your broadcast in service

(function () { 
    angular.module('appModule').factory('AppService', function ($rootScope, $timeout) {

    function refreshData() {  
        $timeout(function() {         
            $rootScope.$broadcast('refreshData');
        }, 0, true);      
    }

    return {           
        RefreshData: refreshData
    };
}); }());

//Controller Implementation
 (function () {
    angular.module('appModule').controller('AppController', function ($rootScope, $scope, $timeout, AppService) {            

       //Removes Listeners before adding them 
       //This line will solve the problem for multiple broadcast call                             
       $scope.$$listeners['refreshData'] = [];

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

       $scope.onSaveDataComplete = function() { 
         AppService.RefreshData();
       };
    }); }());
于 2015-01-13T21:06:46.463 回答