Angular中$broadcast和$emit的使用方法
要在控制器之间传递变量变化需要使用angular中的 broadcast译为广播,即上级传递下级。 <script src="../angular.js"></script> <script> angular.module("app",[]) .controller("child",function($scope) { $scope.$on("parentChange",function(e,m) { $scope.change = "changed"; $scope.child = m; }) }) .controller("parent",function($scope) { $scope.$watch("parent",function(n,o) { if (n == o) { return; } $scope.$broadcast("parentChange",n) }) }) </script> <body> <div ng-controller="parent"> Parent: {{parent}} <input type="text" ng-model="parent"> <div ng-controller="child"> {{change}} Child: {{child}} </div> </div> </body>
上述代码使用$watch监听parent的值的变化,当发生变化时就会“广播”出parentChange事件并传递了参数(输入框的值),此时子元素作用域中使用了 效果: emit译为发射,即下级传递上级。 <script src="../angular.js"></script> <script> angular.module("app",[]) .controller("parent",function($scope) { $scope.$on("childChange",m) { $scope.change = "changed"; $scope.parent = m }) }) .controller("child",function($scope) { $scope.$watch("child",o) { if (n == o) { return; } $scope.$emit("childChange",n) }) }) </script> <body ng-controller="parent"> {{change}} Parent: {{parent}} <div ng-controller="child"> Child: {{child}} <input type="text" ng-model="child"> </div> </body>
当子元素的child值发生变化时,会向上级发出childChange事件,此时父元素正在监听的$on(“childChange”)会做出响应,将传递的参数赋值给parent,整个流程与 broadcast类似。 效果: 上述作用域均存在层级关系,如果对于同级的作用域该如何做呢? 我们可以使用服务来广播事件: <script src="../angular.js"></script>
<script> angular.module("app",[]) .service("myServive",function($rootScope) { return { change: function(n) { $rootScope.$broadcast("valueChange",n); } } }) .controller("bro1",function($scope,myServive) { $scope.$watch("value1",function(n) { myServive.change(n); }) $scope.$on("valueChange",m) { console.log("value1"); $scope.value1 = m; }) }) .controller("bro2",myServive) { $scope.$watch("value2",m) { console.log("value2"); $scope.value2 = m; }) }) </script>
<body>
<div ng-controller="bro1">
<h3> value1:</h3>
<input type="text" ng-model="value1">
</div>
<div ng-controller="bro2">
<h3>value2:</h3>
<input type="text" ng-model="value2">
</div>
</body>
我们在服务中运用了$rootScope,所有的作用域都从属于它,基于这点,我们可以在根作用域中广播事件, 效果为: 更多参考: 此文档的作者:justforuse Github Pages:justforuse (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |