何时使用$ scope。$ on和$ scope.emit on angular？

时间：2015-04-24 06:06:37

标签： angularjs

何时在$scope.$on上使用$scope.emit和angular？我想了解更多关于在角度和使用事件聚合中正确使用此函数的信息。

1 个答案:

答案 0 :(得分：16)

  

AgularJS为控制器之间基于事件的通信提供$ on，$ emit和$ broadcast服务。

$ EMIT

它通过范围层次结构向上调度事件名称，并通知已注册的$rootScope.Scope侦听器。事件生命周期从调用$ emit的范围开始。事件向上遍历根范围并沿途调用所有已注册的侦听器。如果其中一个侦听器取消它，该事件将停止传播。 enter image description here 

<!DOCTYPE html>
<html>
<head>
 <title>Broadcasting</title>
 <script src="lib/angular.js"></script>
 <script>
 var app = angular.module('app', []);

 app.controller("firstCtrl", function ($scope) {
 $scope.$on('eventName', function (event, args) {
 $scope.message = args.message;
 console.log($scope.message);
 });
 });

 app.controller("secondCtrl", function ($scope) {
 $scope.handleClick = function (msg) {
 $scope.$emit('eventName', { message: msg });
 };
 });

 </script>
</head>
<body ng-app="app">
 <div ng-controller="firstCtrl" style="border:2px solid #E75D5C; padding:5px;">
 <h1>Parent Controller</h1>
 <p>Emit Message : {{message}}</p>
 <br />
 <div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
 <h1>Child Controller</h1>
 <input ng-model="msg">
 <button ng-click="handleClick(msg);">Emit</button>
 </div>
 </div>
</body>
</html>

如何运作..

enter image description here

$广播

将事件名称向下调度到所有子范围（及其子级），并通知已注册的$rootScope.Scope侦听器。事件生命周期从调用$ broadcast的范围开始。此范围内事件的所有侦听器都会收到通知。之后，事件向下遍历子范围，并在此过程中调用所有已注册的侦听器。该活动无法取消。

<!DOCTYPE html>
<html>
<head>
 <title>Broadcasting</title>
 <script src="lib/angular.js"></script>
 <script>
 var app = angular.module('app', []);

 app.controller("firstCtrl", function ($scope) {
 $scope.handleClick = function (msg) {
 $scope.$broadcast('eventName', { message: msg });
 };

 });

 app.controller("secondCtrl", function ($scope) {
 $scope.$on('eventName', function (event, args) {
 $scope.message = args.message;
 console.log($scope.message);
 });
 });

 </script>
</head>
<body ng-app="app">
 <div ng-controller="firstCtrl" style="border:2px solid #E75D5C; padding:5px;">
 <h1>Parent Controller</h1>
 <input ng-model="msg">
 <button ng-click="handleClick(msg);">Broadcast</button>
 <br /><br />
 <div ng-controller="secondCtrl" style="border:2px solid #428bca;padding:5px;">
 <h1>Child Controller</h1>
 <p>Broadcast Message : {{message}}</p>
 </div>
 </div>
</body>
</html>

如何运作..

enter image description here

$上

它监听给定类型的事件。它可以捕获由$broadcast和$emit.

分派的事件

注意

  • 如果您的范围之间没有父子关系，您可以将$ rootScope注入控制器并将事件广播到所有子范围，但您无法发出事件。

    • 只有当您拥有父子关系并且子项启动事件传播时，您才能发出事件。但是，$emit只能为所有$rootScope.$on个侦听器触发事件​​。
相关问题
最新问题