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

在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中也会获得修改事后的值。