何时在angular上使用$ scope.$ on和$ scope.emit? [英] When to use $scope.$on and $scope.emit on angular?
问题描述
何时在angular上使用$scope.$on和$scope.emit?我想了解更多有关在角度函数中正确使用此函数的信息，而不是使用事件聚合.
When to use $scope.$on and $scope.emit on angular? I want to learn more about the proper usage of this functions in angular versus using Event Aggregates.
推荐答案
AgularJS为控制器之间基于事件的通信提供$ on，$ emit和$ broadcast服务.
AgularJS provides $on, $emit, and $broadcast services for event-based communication between controllers.
$ emit
它通过作用域层次结构向上调度事件名称，并通知已注册的$rootScope.Scope侦听器.事件生命周期从调用$ emit的范围开始.事件向上遍历到根作用域，并在此过程中调用所有已注册的侦听器.如果其中一个侦听器取消了该事件，则该事件将停止传播.
$emit
It dispatches an event name upwards through the scope hierarchy and notify to the registered $rootScope.Scope listeners. The event life cycle starts at the scope on which $emit was called. The event traverses upwards toward the root scope and calls all registered listeners along the way. The event will stop propagating if one of the listeners cancels it.
<!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>
它如何工作..
它将事件名称向下调度到所有子作用域(及其子作用域)，并通知已注册的$rootScope.Scope侦听器.事件生命周期始于调用$ broadcast的范围.该范围内事件的所有侦听器都将得到通知.之后，事件向下遍历子作用域，并沿途调用所有已注册的侦听器.该事件无法取消.
It dispatches an event name downwards to all child scopes (and their children) and notify to the registered $rootScope.Scope listeners. The event life cycle starts at the scope on which $broadcast was called. All listeners for the event on this scope get notified. Afterwards, the event traverses downwards toward the child scopes and calls all registered listeners along the way. The event cannot be canceled.
<!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>
它如何工作..
它侦听给定类型的事件.它可以捕获由$broadcast和$emit.
It listen on events of a given type. It can catch the event dispatched by $broadcast and $emit.
-
如果作用域之间没有父子关系，则可以将$ rootScope注入到控制器中，并将事件广播到所有子作用域，但是您不能发出事件.
If there is no parent-child relation between your scopes you can inject $rootScope into the controller and broadcast the event to all child scopes but you cannot emit your event.
- 仅当您具有父子关系并且事件传播由孩子发起时，您才可以发出事件.但是，
$emit只能为所有$rootScope.$on侦听器触发一个事件.
- You can emit your event only when you have parent-child relation and event propagation is initiated by child. However,
$emitcan fire an event only for all$rootScope.$onlisteners.
这篇关于何时在angular上使用$ scope.$ on和$ scope.emit?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
