AngularJS中的$ on()是什么

我得到了这个代码$rootScope.$on('abc',function(event, next, current){ }); 在一个教程。

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

One Solution collect form web for “AngularJS中的$ on()是什么”

$on$broadcast$emit – 这是一种从其他地方触发代码的方法。

$on你的第一件事应该知道的是它是一个$scope的方法

你应该知道的第二件事是$前缀引用了一个Angular Method,$$前缀引用了你应该避免使用的angular度方法。

现在我们来详细介绍一下$on是什么。

下面是一个示例模板及其控制器,我们将探讨$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){ }); 

我的问题是,当用户点击注册时,如何将名称传递给第二个控制器? 你可能会想出多个解决scheme,但是我们要使用的是使用$ 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,我们想给它一个唯一的名字,以便我们可以在第二个Ctrl中捕获这个名字。 我select了BOOM! 只是为了好玩。 第二个参数“参数”允许我们将值传递给监听器。

收到我们的广播

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

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

这真的很简单。 现场示例

其他方法来达到类似的结果

尽量避免使用这套方法,因为它既不高效也不容易维护,但这是一个解决问题的简单方法。

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

最后,记住一个非常有用的广播是'$ destroy',你可以看到$表示它是由供应商代码创build的方法或对象。 反正$销毁是广播当一个控制器被摧毁,你可能想听听这个知道你的控制器被删除。

  • 重新加载当前状态 - 刷新数据
  • 参数'fn'不是函数得到的string
  • 如何从chrome控制台angular度访问$ scopevariables
  • $ scope。$ root和$ rootScope有什么区别?
  • AngularJS。 如何从控制器组件外部调用控制器function
  • ng-options中的键值对
  • ng-class中的angularjsexpression式语法是什么
  • 在Karma + AngularJStesting中加载一个模拟的JSON文件
  • Twitter引导程序和Angular.js之间的真实(或隐藏)区别
  • angular度组件:没有模板replace选项?
  • 如何动态更改基于AngularJS部分视图的标题?