什么是AngularJS中的$on()

关于$的第一件事你应该知道，这是一个$范围的方法

你应该知道的第二件事是$前缀是指Angular方法，$$前缀是指你应该避免使用的角度方法。

现在让我们详细了解一下$ on。

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

<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 vs $ 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)。对于broadcastName，我们要给它一个唯一的名称，所以我们可以在我们的secondCtrl中捕获这个名字。我选择了BOOM！只是为了好玩。第二个参数“arguments”允许我们将值传递给侦听器。

接收我们的广播

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

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

真的很简单Live Example

其他方式实现类似的效果

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

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

最后，请记住，一个非常有用的广播听是’$ destroy’再次你可以看到$的意思是它是由供应商代码创建的方法或对象。无论如何，当销毁控制器时，销毁$ destroy，您可能希望听取此消息知道您的控制器何时被删除。