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 相关文章推荐
JS.findElementById()使用介绍
Sep 21 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
javaScript实现一个队列的方法
Jul 14 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语法速查表
2006/12/06 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
jquery中event对象属性与方法小结
2013/12/18 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
学生实习介绍信
2014/01/15 职场文书
数控机床专业自荐信
2014/05/19 职场文书
网络技术专业求职信
2014/07/13 职场文书
个园导游词
2015/02/04 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL