Angular控制器之間的通訊

控制器之間的通訊

---

利用做用域的繼承方式

因爲做用域的繼承是基於js的原型繼承方式，因此這裏分爲兩種狀況，看成用域上面的值爲基本類型的時候，修改父做用域上面的值會
影響到子做用域，反之，修改子做用域只會影響子做用域的值，不會影響父做用域上面的值；若是須要父做用域與子做用域共享一個值
的話，就須要用到後面一種，即做用域上的值爲對象，任何一方的修改都能影響另外一方，這是由於在js中對象都是引用類型。

基本類型

function Sandcrawler($scope) {
    $scope.location = "Mos Eisley North";    $scope.move = function(newLocation) {
        $scope.location = newLocation;
    }
}function Droid($scope) {
    $scope.sell = function(newLocation) {
        $scope.location = newLocation;
    }
}// html<div ng-controller="Sandcrawler">
    <p>Location: {{location}}</p>
    <button ng-click="move('Mos Eisley South')">Move</button>
    <div ng-controller="Droid">
        <p>Location: {{location}}</p>
        <button ng-click="sell('Owen Farm')">Sell</button>
    </div>
</div>

對象

function Sandcrawler($scope) {
    $scope.obj = {location:"Mos Eisley North"};
}function Droid($scope) {
    $scope.summon = function(newLocation) {
        $scope.obj.location = newLocation;
    }
}// html<div ng-controller="Sandcrawler">
    <p>Sandcrawler Location: {{location}}</p>
    <div ng-controller="Droid">
        <button ng-click="summon('Owen Farm')">
            Summon Sandcrawler
        </button>
    </div>
</div>

基於事件的方式

在通常狀況下基於繼承的方式已經足夠知足大部分狀況了，可是這種方式沒有實現兄弟控制器之間的通訊方式，因此引出了事件的方式
。基於事件的方式中咱們能夠裏面做用的$on,$emit,$boardcast這幾個方式來實現，其中$on表示事件監聽，$emit表示向父級以上的
做用域觸發事件， $boardcast表示向子級如下的做用域廣播事件。參照如下代碼：

向上傳播事件

function Sandcrawler($scope) {
    $scope.location = "Mos Eisley North";    $scope.$on('summon', function(e, newLocation) {
        $scope.location = newLocation;
    });
}function Droid($scope) {
    $scope.location = "Owen Farm";    $scope.summon = function() {
        $scope.$emit('summon', $scope.location);
    }
}// html<div ng-controller="Sandcrawler">
    <p>Sandcrawler Location: {{location}}</p>
    <div ng-controller="Droid">
        <p>Droid Location: {{location}}</p>
        <button ng-click="summon()">Summon Sandcrawler</button>
    </div>
</div>

向下廣播事件

function Sandcrawler($scope) {
    $scope.location = "Mos Eisley North";    $scope.recall = function() {
        $scope.$broadcast('recall', $scope.location);
    }
}function Droid($scope) {
    $scope.location = "Owen Farm";    $scope.$on('recall', function(e, newLocation) {
        $scope.location = newLocation;
    });
}//html<div ng-controller="Sandcrawler">
    <p>Sandcrawler Location: {{location}}</p>
    <button ng-click="recall()">Recall Droids</button>
    <div ng-controller="Droid">
        <p>Droid Location: {{location}}</p>
    </div>
</div>

從這個用法咱們能夠引伸出一種用於兄弟控制間進行通訊的方法，首先咱們一個兄弟控制中向父做用域觸發一個事件，而後在父做用域
中監聽事件，再廣播給子做用域，這樣經過事件攜帶的參數，實現了數據通過父做用域，在兄弟做用域之間傳播。這裏要注意的是，經過父元素做爲中介進行傳遞的話，兄弟元素用的事件名不能同樣，不然會進入死循環。請看代碼：

-兄弟做用域之間傳播

function Sandcrawler($scope) {
    $scope.$on('requestDroidRecall', function(e) {
        $scope.$broadcast('executeDroidRecall');
    });
}function Droid($scope) {
    $scope.location = "Owen Farm";    $scope.recallAllDroids = function() {
        $scope.$emit('requestDroidRecall');
    }    $scope.$on('executeDroidRecall', function() { 
        $scope.location = "Sandcrawler"
    });
}// html<div ng-controller="Sandcrawler">
    <div ng-controller="Droid">
        <h2>R2-D2</h2>
        <p>Droid Location: {{location}}</p>
        <button ng-click="recallAddDroids()">Recall All Droids</button>
    </div>
    <div ng-controller="Droid">
        <h2>C-3PO</h2>
        <p>Droid Location: {{status}}</p>
        <button ng-click="recallAddDroids()">Recall All Droids</button>
    </div>
</div>

angular服務的方式

在ng中服務是一個單例，因此在服務中生成一個對象，該對象就能夠利用依賴注入的方式在全部的控制器中共享。參照如下例子，在一個控制器修改了服務對象的值，在另外一個控制器中獲取到修改後的值：

var app = angular.module('myApp', []);
app.factory('instance', function(){
    return {};
});
app.controller('MainCtrl', function($scope, instance) {
  $scope.change = function() {
       instance.name = $scope.test;
  };
});
app.controller('sideCtrl', function($scope, instance) {
    $scope.add = function() {
        $scope.name = instance.name;
    };
});//html<div ng-controller="MainCtrl">
     <input type="text" ng-model="test" />
     <div ng-click="change()">click me</div>
</div>
<div ng-controller="sideCtrl">
    <div ng-click="add()">my name {{name}}</div>
</div>