理解angularjs中的$emit,$broadcast和$on
在angularjs中提供了
<!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 : </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>
运行效果如下: 2、$broadcast <!DOCTYPE html>
<html>
<head>
<title>Broadcasting</title>
<script src="lib/angular.js"></script>
<script> var app = angular.module('app',function ($scope) { $scope.handleClick = function (msg) { $scope.$broadcast('eventName',{ message: msg }); }; }); app.controller("secondCtrl",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 : </p>
</div>
</div>
</body>
</html>
运行结果如下: 1、如果在作用域中没有父子关系存在,可以在控制器中注入$rootScope、使用$broadcast服务向下传播事件,但是不能通过$emit向上传播事件。
2、在作用域中存在父子关系时,可以也仅可以由子控制器使用$emit服务向上传播事件,同时父作用域中的控制监听器可以注销事件。
[原文地址 Understanding
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |