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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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
Linux编译升级php的详细方法
2013/11/04 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python批量修改文件名的实现代码
2014/09/01 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
汽车专业毕业生自荐信
2013/11/03 职场文书
大学生助学金感谢信
2015/01/21 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
二审答辩状格式
2015/05/22 职场文书
婚礼答谢词范文
2015/09/29 职场文书
2016党员党课心得体会
2016/01/07 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
Android Studio 计算器开发
2022/05/20 Java/Android