在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参数,表示事件,有如下方法:

            event.targetScope 获取传播事件的作用域
event.currentScope 获取接收事件的作用域
event.name 传播的事件的名称
event.stopPropagation() 阻止事件进行冒泡传播,仅在$emit事件中有效
event.preventDefault() 阻止传播事件的发生
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中也会得到修改过后的值。

angular中控制器之间传递参数的方式的更多相关文章

  1. angular中控制器之间的通讯方式

    1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...

  2. jmeter中线程之间传递参数

    JMeter 变量作用域局限于所属线程.这样设计是经过深思熟虑的,目的是让测试线程能够独立运转.有时候用户可能需要在不同线程间(可能属于同一个线程组,也可能不属于同一个线程组)传递变量. 其中一种方法 ...

  3. mvc中view与controll之间传递参数时,可以使用url进行传递

    mvc中view与controller之间传递参数时,可以使用url进行传递,但是在url的地址中需要加上“id=123”这样的东西才行. 具体如代码: window.location.href = ...

  4. angular开发控制器之间的通信

    一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...

  5. jsp中四种传递参数的方法

    jsp中四种传递参数的方法如下: 1.form表单 2.request.setAttribute();和request.getAttribute(); 3.超链接:<a herf="i ...

  6. ASP.NET网页之间传递参数与值

    ASP.NET网页之间传递参数与值,方法很多,可以使用Application,Cookie,Session,或是Querystring等等.由于Insus.NET开发的程序中,多数是在后台之间进行参数 ...

  7. JS多个函数之间传递参数问题

    JS多个函数之间传递参数的一个重要思想是在页面定义一个隐藏域,当第一个函数请求到数据时候修改隐藏域的值,第二个函数用jQuery的选择器选择页面中隐藏域的值. 比如: 页面中定义一个隐藏的页号. &l ...

  8. linux中probe函数传递参数的寻找(下)

    点击打开链接 linux中probe函数传递参数的寻找(下) 通过追寻driver的脚步,我们有了努力的方向:只有找到spi_bus_type的填充device即可,下面该从device去打通,当两个 ...

  9. JSP页面之间传递参数的方法有哪些?

    JSP页面之间传递参数的方法有哪些? 解答: 1)request 2)session 3)application 4)提交表单 5)超链接

随机推荐

  1. dapperHelper

    public class DapperHelper { /// 数据库连接名 private static string _connection = string.Empty; /// 获取连接名 p ...

  2. ES6深入浅出-8 新版的类(下集)-3.书籍推荐

  3. VMware 快速克隆出多个 Linux centos7 环境

    这样一台系统就已经克隆好了,但是,现在还没有完,因为是克隆的,里面的ip地址和创建的主机名都是一样,需要进行修改 登录服务器,然后使用 [ifcfg-ens33需根据实际情况而定] vi /etc/s ...

  4. Python subprocess中的run方法

    调用subprocess的推荐方法是对于它可以处理的所有使用场景都使用run()函数. run()函数是在Python 3.5中添加的,如果在老版本中使用,需要下载并扩展. 扩展安装方式: $ pip ...

  5. Python - Django - ORM 自定义表名

    通过 Django 建立的表 命名方式为:项目名_表名 可以将该默认命名方式进行修改 models.py: from django.db import models class Person(mode ...

  6. Python - Django - FBV 和 CBV

    FBV: Function Base View,基于函数的视图 views.py: from django.shortcuts import render, HttpResponse # FBV de ...

  7. LeetCode_226. Invert Binary Tree

    226. Invert Binary Tree Easy Invert a binary tree. Example: Input: 4 / \ 2 7 / \ / \ 1 3 6 9 Output: ...

  8. centos上为新创建的用户(git)指定根目录并生成公钥和私钥

    1.修改用户的根目录 vim /etc/passed 2.su git 3.ssh-keygen -t rsa ssh-keygen -t rsa 4.如图所示,如果要实现无密码访问git仓库,把公钥 ...

  9. redis添加到linux系统服务

    http://blog.csdn.net/justfor3l/article/details/53187795

  10. Win10安装Golang

    首先去这个网站下载Golang的安装包:https://studygolang.com/dl 因为我的系统是Win10专业版64位,所以我选择了对应的Windows的安装包进行下载: 下载好安装包之后 ...