数据共享与通信控制器之间的详细解AngularJS

数据共享与通信控制器之间的详细解AngularJS
AngularJS提供指导和服务作为命令的方式来实现数据和代码的重用和共享,但在实际的项目开发,也许是懒惰的,或为了方便,在两个通信控制器之间总是认为,共享直接进入数据或函数的调用方法,这里我们以什么方法看能不能满足这个要求。

Single service

一个单一的服务是数据和代码共享的方式,AngularJS本身的支持,因为它是一个单一的情况下,和所有的控制器访问相同的数据。例如,下面的服务可以实现:

模块('app)。
。服务('objectservice,{ objectservice });
功能objectservice(){
var列表{ };
返回{
获取:函数(id){
返回列表{ };
},
设置:函数(id,v){
列表{;
}
};
}
In a controller, the data set by calling ObjectService.set ('i', 1) can be obtained by ObjectService.get ('i') in other controllers.

广播事件

在AngularJS,当事件被触发和广播发送,参数可以通过,可以用来共享数据。有三个方法,事件和广播有关,这是:

1美元。发出():触发事件,可以通过数据向上,如子控制器的主控制器,与控制器的rootscope美元
2美元。广播():发送广播,它能传送数据,例如,父控制器将数据传送到控制器,或$ rootscope数据传输到任何控制器。
3 $ $():监视事件和广播,并可捕获$发射和广播。
控制器之间的通信可分为三种情况:

1、没有直接相关的控制器:使用rootscope美元。美元发出(),rootscope美元。美元(美元)段或范围。$发出发送数据,并通过rootscope美元美元()获取数据。
2。父母一个子控制器:控制器的主控制器采用美元美元范围。广播()发送数据,和子控制器得到的数据通过美元美元在()范围。
3。子控制器到父控制器:子控制器使用$范围($)来发送数据,而父控制器通过$。
以下是简单的用法:
一个控制器

模块('app)。
控制器('onecontroller,{ $范围,OneController });
功能onecontroller(范围){
VaR数据= {价值:测试};
rootscope美元。美元(打开广播,通知。编辑、数据);
}

其他控制器

模块('app)。
控制器('anothercontroller,{ $范围,AnotherController });
函数的AnotherController(范围){
美元美元范围。(打开。注意。编辑功能(事件、数据){
scope.open美元(数据);
美元美元范围。发出('notice。编辑。打开);
});
}
主控制器

如果两个控制器具有相同的父控制器,则可以由父控制器执行数据共享和通信:

父亲/控制器

模块('app)。
控制器('parentcontroller,{ $范围,ParentController });
功能parentcontroller(范围){
变量的数据传输
$scope.data = null;
}

子控制器

模块('app)。
控制器('childonecontroller,{ $范围,ChildOneController });
功能childonecontroller(范围){
数据集
parent.data = 1美元美元的范围;
}

子控制器

模块('app)。
控制器('childtwocontroller,{ $范围',' $超时,ChildTwoController });
功能childtwocontroller($美元范围,超时){
超时(函数(){())
读取数据
console.log(美元范围。为母。数据);
},1000);
}
全局变量或共享变量

AngularJS提供两变量封装窗口和localStorage。美元美元的窗口可以实现数据的共享和存储控制器之间的通信通过修改和监控这两个值的目的。方法如下:
一个控制器

模块('app)。
控制器('onecontroller,{ $范围','窗口'美元,OneController });
功能onecontroller($美元范围,窗口){
数据集
window.data = 1美元;
}

其他控制器

模块('app)。
控制器('anothercontroller,{ $范围,AnotherController });
函数的AnotherController(范围){
修改/监视
$ $(表)(函数){()
返回的window.data;
}函数(n){
scope.windowdata美元= N;
});
}
事实上,这种监视修改也可以用于其他通信方法。

元素的结合

在AngularJS,一个元素可以用来得到控制器的实例,它以这种方式可以迅速获得

修改控制器中的数据或调用控制器中的方法:

下面的方法可以用来获取控制器实例:
var实例= angular.element(document.getelementbyid('div-a '))Scope();
然后,您可以通过这个实例调用控制器的方法来获取和修改值。不能是元素本身绑定一个控制器,或者元素的父元素绑定有一个控制器,可以成功地获得。

本文介绍了角控制器之间的数据共享和通信。朋友在AngularJS数据共享知识感兴趣的可以一起学习。谢谢您一直鼓励我。
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部