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中也會獲得修改事後的值。