什么是AngularJS中的$on()

前端之家收集整理的这篇文章主要介绍了什么是AngularJS中的$on()前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我得到这个代码$ rootScope。$ on(‘abc’,function(event,next,current){});在教程中。

我的问题是什么。$ on()?如果它是一个函数,那么为什么它前面是$?

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

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

你应该知道的第二件事是$前缀是指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,您可能希望听取此消息知道您的控制器何时被删除

猜你在找的Angularjs相关文章