什么是AngularJS中的.$ on() [英] What is .$on() in AngularJS

问题描述

我在教程中获得了此代码$rootScope.$on('abc',function(event, next, current){ });.

I got this code $rootScope.$on('abc',function(event, next, current){ }); in a tutorial.

我的问题是.$on()是什么?如果它是一个函数，那么为什么在它前面加上$?

My question is what is .$on()? If it is a function, then why is it preceded by $?

推荐答案

$on与$broadcast和$emit有关-这是从其他地方触发代码的一种方式.

$on is related to $broadcast and $emit - which is a way to trigger code from other places.

您应该知道的关于$on的第一件事是它是$scope

The first thing about $on you should know is that it's a method of $scope

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

The second thing you should know is $ prefix refers to an Angular Method, $$ prefixes refers to angular methods that you should avoid using.

现在，让我们详细了解什么是$on.

Now lets get into detail about what $on is.

下面是一个示例模板及其控制器，我们将探讨$broadcast/$on如何帮助我们实现所需的目标.

Below is an example template and its controllers, we'll explore how $broadcast/$on can help us achieve what we want.

<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.

My question to you is how do you pass the name to the second controller when a user clicks register? You may come up with multiple solutions but the one we're going to use is using $broadcast and $on.

$ broadcast vs $ emit

我们应该使用哪个? $ broadcast将引导所有子dom元素，而$ emit将引导相反方向的所有祖先dom元素.

Which should we use? $broadcast will channel down to all the children dom elements and $emit will channel the opposite direction to all the ancestor dom elements.

避免在$ emit或$ broadcast之间做出决定的最佳方法是从$ rootScope引导并使用$ broadcast对其所有子级进行广播.因为dom元素是同级元素，所以这使我们的案子变得容易得多.

The best way to avoid deciding between $emit or $broadcast is to channel from the $rootScope and use $broadcast to all its children. Which makes our case much easier since our dom elements are siblings.

添加$ rootScope并允许$ broadcast

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

请注意，我们添加了$ rootScope，现在我们正在使用$ broadcast(broadcastName，arguments).对于broadcastName，我们想给它一个唯一的名称，以便我们可以在secondCtrl中捕获该名称.我选择了BOOM！纯娱乐.第二个参数"arguments"使我们可以将值传递给侦听器.

Note we added $rootScope and now we're using $broadcast(broadcastName, arguments). For broadcastName, we want to give it a unique name so we can catch that name in our secondCtrl. I've chosen BOOM! just for fun. The second arguments 'arguments' allows us to pass values to the listeners.

接收我们的广播

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

In our second controller, we need to set up code to listen to our broadcast

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

就是这么简单. 在线示例

获得相似结果的其他方式

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

Try to avoid using this suite of methods as it is neither efficient nor easy to maintain but it's a simple way to fix issues you might have.

通常，您可以通过使用服务或简化控制器来执行相同的操作.我们不会对此进行详细讨论，但我想我只是为了完整性而提及它.

You can usually do the same thing by using a service or by simplifying your controllers. We won't discuss this in detail but I thought I'd just mention it for completeness.

最后，请记住，要收听的真正有用的广播是"$ destroy"，您可以看到$表示它是由供应商代码创建的方法或对象.无论如何，销毁控制器时会广播$ destroy，您可能想听一下，以了解何时卸下控制器.

Lastly, keep in mind a really useful broadcast to listen to is '$destroy' again you can see the $ means it's a method or object created by the vendor codes. Anyways $destroy is broadcasted when a controller gets destroyed, you may want to listen to this to know when your controller is removed.

这篇关于什么是AngularJS中的.$ on()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！