我的问题是什么。$ 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,您可能希望听取此消息知道您的控制器何时被删除。