Angular.js中控制器之间的传值详解


Posted in Javascript onApril 24, 2017

前言

每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子...

那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个controller都能收到事件

另外,我的经验是,尽量不要用event传数据。应该建立一个service来保存数据,并且设置相应getter/setter,具体如下:

 每个controller依赖service, call service.setter(...)

统一的service.setter(...)在改完数据后可以$emit('data-updated')

每个controller里$on('data-updated', function(){ $scope.data = service.getData() })

通过Angular的话可以通过下面四种方法

1、event

这里可以有两种方式,一种是$scope.$emit,然后通过监听$rootScope的事件获取参数;另一种是$rootScope.$broadcast,通过监听$scope的事件获取参数。

这两种方法在最新版本的Angular中已经没有性能区别了,主要就是事件发送的方向不同,可以按实际情况选择。

2、service

可以创建一个专用的事件Service,也可以按照业务逻辑切分,将数据存储在相应的Service中,因为已经有人提过了就不赘述了。

3、$rootScope

这个方法可能会比较dirty一点,胜在方便,也就是把数据存在$rootScope中,这样各个子$scope都可以调用,不过需要注意一下生命周期

4、直接使用$scope.$nextSibling及类似的属性

类似的还有$scope.$parent。这个方法的缺点就更多了,官方不推荐使用任何$开头的属性,既增加了耦合,又需要处理异步的问题,而且scope的顺序也不是固定的。不推荐

另外就是通过本地存储、全局变量或者现代浏览器的postMessage来传递参数了,除非特殊情况,请避免这类方式。

直接建一个service,不要用什么事件,项目一大N多个controller或者N久再去维护会玩死你,service里提供存和取的方法,简单明了,API容易查找和修改,调试也方便无混乱的依赖关系

1、利用作用域的继承方式

由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值;如果需要父作用域与子作用域共享一个值 的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型。

基本类型

function Sandcrawler($scope) {
 $scope.location = "Mos Eisley North";
 $scope.move = function(newLocation) {
 $scope.location = newLocation;
 }}function Droid($scope) {
 $scope.sell = function(newLocation) {
 $scope.location = newLocation;
 }}// html<div ng-controller="Sandcrawler">
 <p>Location: {{location}}</p>
 <button ng-click="move('Mos Eisley South')">Move</button>
 <div ng-controller="Droid">
 <p>Location: {{location}}</p>
 <button ng-click="sell('Owen Farm')">Sell</button>
 </div></div>

对象

function Sandcrawler($scope) {
 $scope.obj = {location:"Mos Eisley North"};}function Droid($scope) {
 $scope.summon = function(newLocation) {
 $scope.obj.location = newLocation;
 }}// html<div ng-controller="Sandcrawler">
 <p>Sandcrawler Location: {{location}}</p>
 <div ng-controller="Droid">
 <button ng-click="summon('Owen Farm')">
 Summon Sandcrawler
 </button>
 </div></div>

2、基于事件的方式

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

向上传播事件

function Sandcrawler($scope) {
 $scope.location = "Mos Eisley North";
 $scope.$on('summon', function(e, newLocation) {
 $scope.location = newLocation;
 });}function Droid($scope) {
 $scope.location = "Owen Farm";
 $scope.summon = function() {
 $scope.$emit('summon', $scope.location);
 }}// html<div ng-controller="Sandcrawler">
 <p>Sandcrawler Location: {{location}}</p>
 <div ng-controller="Droid">
 <p>Droid Location: {{location}}</p>
 <button ng-click="summon()">Summon Sandcrawler</button>
 </div></div>

向下广播事件

function Sandcrawler($scope) {
 $scope.location = "Mos Eisley North";
 $scope.recall = function() {
 $scope.$broadcast('recall', $scope.location);
 }}function Droid($scope) {
 $scope.location = "Owen Farm";
 $scope.$on('recall', function(e, newLocation) {
 $scope.location = newLocation;
 });}//html<div ng-controller="Sandcrawler">
 <p>Sandcrawler Location: {{location}}</p>
 <button ng-click="recall()">Recall Droids</button>
 <div ng-controller="Droid">
 <p>Droid Location: {{location}}</p>
 </div>
</div>

从这个用法我们可以引申出一种用于兄弟控制间进行通信的方法,首先我们一个兄弟控制中向父作用域触发一个事件,然后在父作用域 中监听事件,再广播给子作用域,这样通过事件携带的参数,实现了数据经过父作用域,在兄弟作用域之间传播。这里要注意的是,通过父元素作为中介进行传递的话,兄弟元素用的事件名不能一样,否则会进入死循环。

请看代码:

兄弟作用域之间传播

function Sandcrawler($scope) {
 $scope.$on('requestDroidRecall', function(e) {
 $scope.$broadcast('executeDroidRecall');
 });}function Droid($scope) {
 $scope.location = "Owen Farm";
 $scope.recallAllDroids = function() {
 $scope.$emit('requestDroidRecall');
 }
 $scope.$on('executeDroidRecall', function() { 
 $scope.location = "Sandcrawler"
 });}// html<div ng-controller="Sandcrawler">
 <div ng-controller="Droid">
 <h2>R2-D2</h2>
 <p>Droid Location: {{location}}</p>
 <button ng-click="recallAddDroids()">Recall All Droids</button>
 </div>
 <div ng-controller="Droid">
 <h2>C-3PO</h2>
 <p>Droid Location: {{status}}</p>
 <button ng-click="recallAddDroids()">Recall All Droids</button>
 </div></div>

3、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>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者使用Angular.js能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 #jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 #jQuery
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 #Javascript
angularjs中的$eval方法详解
Apr 24 #Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 #Javascript
angularjs中回车键触发某一事件的方法
Apr 24 #Javascript
浅谈angularjs中响应回车事件
Apr 24 #Javascript
You might like
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
python频繁写入文件时提速的方法
2019/06/26 Python
python 循环数据赋值实例
2019/12/02 Python
pytorch构建多模型实例
2020/01/15 Python
高中生学习总结的自我评价范文
2013/10/13 职场文书
讲座主持词
2014/03/20 职场文书
感恩教育活动总结
2014/05/05 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
党员检讨书范文
2014/12/27 职场文书
公积金接收函格式
2015/01/30 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
用人单位聘用意向书
2015/05/11 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
OpenCV全景图像拼接的实现示例
2021/06/05 Python
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python