全国服务热线:4008-888-888

技术知识

小程序为何这么火_AngularJS开发教程之控制器之间

AngularJS开发教程之控制器之间的通信方法分析       这篇文章主要介绍了AngularJS开发教程之控制器之间的通信方法,结合实例形式较为详细的分析了AngularJS控制器之间通信的三种常用方式及相关使用技巧,需要的朋友可以参考下

本文实例讲述了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='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='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='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之间的通信,其实是借助共同父级传递消息的:

子级scope中有谁想传消息了,emit一个给“奶爸”然后通过“奶爸”emit一个给“奶爸”然后通过“奶爸”broadcast 给所有孩子这个相同的信息,当然发出信息的那个可以选择是否要忽略掉自己发出的信息

四、angular服务的方式:

在ng中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子,在一个控制器修改了服务对象的值,在另一个控制器中获取到修改后的值:

var app = angular.module('myApp', []);
app.factory('instance', function(){
 return {};
app.controller('MainCtrl', function($scope, instance) {
 $scope.change = function() {
 instance.name = $scope.test;
app.controller('sideCtrl', function($scope, instance) {
 $scope.add = function() {
 $scope.name = instance.name;

html:

 div ng-controller="MainCtrl" 
 input type="text" ng-model="test" / 
 div ng-click="change()" click me /div 
 /div 
 div ng-controller="sideCtrl" 
 div ng-click="add()" my name {{name}} /div 
 /div 

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》及《》

希望本文所述对大家AngularJS程序设计有所帮助。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服