AngularJS开发教程之控制器之间的通信方法分析

一、指令与控制器之间通信,无非是以下几种方法:

基于scope继承的方式

基于event传播的方式

service的方式(单例模式)

二、基于scope继承的方式:

最简单的让控制器之间进行通信的方法是通过scope的继承。假设有两个控制器Parent、Child,Child 在 Parent 内,那Child 可以称为控制器Parent的子控制器,它将继承父控制器Parent的scope。这样,Child就可以访问到Parent的scope中的所有函数和变量了。

需要注意的是,由于scope的继承是基于Js的原型继承,如果变量是基本类型的,那在Child中的修改(写),有可能会导致Parent中的数据变脏。

例子:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于scope继承的方式</title> </head> <body ng-app = "myApp"> <div ng-controller = "parent"> <p>引用类型:{{obj.value}}</p> <p>引用类型:{{value}}</p> <a href="javascript:;" ng-click = "parent('parent')">点我</a> <div ng-controller="child"> <p>引用类型:{{obj.value}}</p> <p>引用类型:{{value}}</p> <a href="javascript:;" ng-click = "child('child')">点我</a> </div> </div> <script type="text/javascript" src='https://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script> <script> var app = angular.module("myApp",[],function(){console.log("start")}); app.controller("parent",function($scope){ $scope.parent = function(newchild){ // 这里不能都单独写成$scope.obj={value:newchild} $scope.obj={value:newchild}; $scope.value = newchild; } }); app.controller("child",function($scope){ $scope.child = function(newchild){ $scope.value = newchild; $scope.obj.value=newchild; } }); </script> </body> </html>

三、基于事件的方式:

在一般情况下基于继承的方式已经足够满足大部分情况了,但是这种方式没有实现兄弟控制器之间的通信方式,所以引出了事件的方式 。基于事件的方式中我们可以里面作用的on,on,emit,boardcast这几个方式来实现,其中boardcast这几个方式来实现,其中on表示事件监听,emit表示向父级以上的作用域触发事件,emit表示向父级以上的作用域触发事件,boardcast表示向子级以下的作用域广播事件。

子到父 通过 $emit 注册事件,例子:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于事件传播子到父</title> </head> <body ng-app = "myApp"> <h3>$on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的 作用域触发事件, $boardcast表示向子级以下的作用域广播事件</h3> <div ng-controller = "parent"> <p>引用类型:{{value}}</p> <div ng-controller="child"> <a href="javascript:;" ng-click = "child('child')">子传值到父</a> </div> </div> <script type="text/javascript" src='https://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script> <script> var app = angular.module("myApp",[],function(){console.log("start")}); app.controller("parent",function($scope){ $scope.$on("pfan",function(e,data){ $scope.value = data; }) }); app.controller("child",function($scope){ $scope.child = function(newchild){ $scope.value = newchild; $scope.$emit("pfan",$scope.value) } }); </script> </body> </html>

父到子通过$broadcast注册事件,但其实感觉有点多余,本事父就是可以共享给子的,例子:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于事件传播父到子</title> </head> <body ng-app = "myApp"> <h3>$on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的 作用域触发事件, $boardcast表示向子级以下的作用域广播事件</h3> 基于事件传播父到子,这里本事父就可以到子,感觉有点多余 <div ng-controller = "parent"> <a href="javascript:;" ng-click = "parent('child')">子传值到父</a> <div ng-controller="child"> <p>引用类型:{{value}}</p> </div> </div> <script type="text/javascript" src='https://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script> <script> var app = angular.module("myApp",[],function(){console.log("start")}); app.controller("parent",function($scope){ $scope.parent = function(newchild){ $scope.value = newchild; $scope.$broadcast("pfan",$scope.value) } }); app.controller("child",function($scope){ $scope.$on("pfan",function(e,data){ $scope.value = data; }) }); </script> </body> </html>

同级之间

拥有同个父scope的子级scope之间,也就是兄弟/相邻scope之间的通信,其实是借助共同父级传递消息的:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjxsd.html