• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > angular中实现控制器之间传递参数的方式

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

作者:北城以南 字体:[增加 减小] 来源:互联网 时间:2017-05-11

北城以南通过本文主要向大家介绍了angular js控制器,angular控制器,angular里面的控制器,angular路由参数,angular.module参数等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

在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
  }]);
</div>

在子控制器中打印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);
  }]);
</div>

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;//接受值
      
    });
  }]);
</div>

注意:参数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";
  }]);
</div>

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2017-05-11Vue表单验证插件Vue Validator使用方法详解
  • 2017-05-11js基于myFocus实现轮播图效果
  • 2017-05-11微信小程序 摇一摇抽奖简单实例实现代码
  • 2017-05-11js实现带缓动动画的导航栏效果
  • 2018-01-07js函数中的with用法
  • 2017-05-11js实现常见的工具条效果
  • 2017-05-11移动端使用localResizeIMG4压缩图片
  • 2017-05-11JS中IP地址与整数相互转换的实现代码
  • 2017-05-11jQuery实现 上升、下降、删除、添加一行代码
  • 2017-05-11Angular.js中控制器之间的传值详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 基于vue.js轮播组件vue-awesome-swiper实现轮播图
    • JS实现的Unicode编码转换操作示例
    • AngularJS之ionic 框架下实现 Localstorage本地存储
    • 原生js实现返回顶部缓冲效果
    • Bootstrap进度条与AJAX后端数据传递结合使用实例详解
    • jQuery实现简单的抽奖游戏
    • JQuery validate 验证一个单独的表单元素实例
    • JS中Select下拉列表类(支持输入模糊查询)功能
    • js中作用域的实例解析
    • 简要记录ES6中Module的语法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有