angular中实现控制器之间传递参数的方式


Posted in Javascript onApril 24, 2017

在angular中,每个controller(控制器)都会有自己的$scope,通过为这个对象添加属性赋值,就可以将数据传递给模板进行渲染,每个$scope只会在自己控制器内起作用,而有时候需要用到其他控制器中的数据,这个时候就要考虑到控制器之间参数的传递了。

1.通过$rootscope传参

首先,在angular中存在作用域的继承,继承作用域符合 JavaScript 的原型继承机制,这意味着如果我们在子作用域中访问一个父作用域中定义的属性,JavaScript 首先在子作用域中寻找该属性,没找到再从原型链上的父作用域中寻找,如果还没找到会再往上一级原型链的父作用域寻找。在 AngularJS 中,作用域原型链的顶端是$rootScope,AnguarJS 将会寻找到$rootScope 为止,如果还是找不到,则会返回 undefined。

<div ng-app="app">
    <div ng-controller="parent">
      {{name}}
      <div ng-controller="son">
      {{name}}
      </div>
    </div>
  </div>
  var app=angular.module("app",[]);
  app.controller('parent', ['$scope',function ($scope) {
    $scope.name="hello";
  }]);
  app.controller('son', ['$scope',function ($scope) {
    console.log($scope.name);//hello
  }]);

在子控制器中打印name,但我们发现在这个控制器中并未为$scope添加name,于是向父作用域查找,发现父作用域存在该属性,所以可以打印出来。

$rootscope 是所有 $scope 的最上层对象,可以理解为一个 Angular 应用中的全局作用域对象。所以为$rootscope添加的属性,在所有的控制器中都可以访问得到。但是为它附加太多逻辑或者变量并不是一个好主意,和js全局污染是一样的.

2.通过事件的方式

首先介绍一下angular中的事件广播:

$on(name,handler) 注册一个事件处理函数,该函数在特定的事件被当前作用域收到(从父级或者子级作用域)时将被调用。

$emit(name,args) 向当前父作用域发送一个事件,直至根作用域。

$broadcast(name,args) 向当前作用域下的子作用域发送一个事件。

name表示事件名称,args表示事件传播的数据,handler表示在接受到传递时要执行的回调,该回调中有event参数,表示事件,有如下方法:

  1. event.targetScope 获取传播事件的作用域
  2. event.currentScope 获取接收事件的作用域
  3. event.name 传播的事件的名称
  4. event.stopPropagation() 阻止事件进行冒泡传播,仅在$emit事件中有效
  5. event.preventDefault() 阻止传播事件的发生  
  6. event.defaultPrevented 如果调用了preventDefault事件则返回true

1)子向父控制器传值

<div ng-app="app">
    <div ng-controller="parent">
      {{name}}
      <div ng-controller="son">
      {{name}}
      </div>
    </div>
  </div>
  var app=angular.module("app",[]);
  app.controller('parent', ['$scope',function ($scope) {
    $scope.$on('call', function(event,data){
      $scope.name=data;
      console.log(data);
    });
  }]);
  app.controller('son', ['$scope',function ($scope) {
    $scope.name="hello";
    $scope.$emit('call', $scope.name);
  }]);

2)父向子控制器传值

var app=angular.module("app",[]);
  app.controller('parent', ['$scope',function ($scope) {
    $scope.name="hello";
    $scope.$broadcast('call', $scope.name);//传值
  }]);
  app.controller('son', ['$scope',function ($scope) {
    $scope.$on('call', function(event,data1){
      $scope.name1=data1;//接受值
      
    });
  }]);

注意:参数name相同时,父子控制器之间才可以传值

这种方式不可实现兄弟级传值,不过可以使用父级控制器作为中介,先由子控制器传值给父控制器,然后再由父控制器传递给另外的子控制器。

补充:之前遇到一个需求是,父控制器中,触发change事件后,获取数据传递给子控制,但是在子控制器只需要接受一次,发现可通过如下方式:

var scan=$scope.$on(name,handler);scan();这样子控制器就只接受可一次,避免了多次接受带来的影响!

3.通过服务

在angular中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。

例:

var app=angular.module("app",[]);
  app.controller('myCtrl', ['$scope','appService',function ($scope,appService) {
    appService.name="hi!!"
  }]);
  app.controller('myCtrl1', ['$scope', 'appService',function ($scope,appService) {
    $scope.name=appService.name;
  }]);
  app.service("appService", [function(){
    this.name="hello";
  }]);

通过在appService这个服务中添加对象,然后在需要用到的控制器中,通过依赖注入的方式导入该服务,在myCtrl控制器中修改这个对象,在myCtrl1中也会得到修改过后的值。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
Javascript 写的简单进度条控件
Jan 22 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 #Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 #Javascript
JS简单获取日期相差天数的方法
Apr 24 #Javascript
Angular.js中控制器之间的传值详解
Apr 24 #Javascript
jquery submit()不能提交表单的解决方法
Apr 24 #jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 #jQuery
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 #Javascript
You might like
php开发工具之vs2005图解
2008/01/12 PHP
php生成图片缩略图的方法
2015/04/07 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
js图片处理示例代码
2014/05/12 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python向日志输出中添加上下文信息
2017/05/24 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
创业计划书的写作技巧及要点
2014/01/31 职场文书
实习指导老师评语
2014/04/26 职场文书
学生保证书范文
2014/04/28 职场文书
单位委托书怎么写
2014/09/21 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
检讨书之工作不认真
2019/08/14 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js