angular controller之間通訊方式

對於日常開發中，難免會有controller之間通訊需求。對於controller之間通訊有兩種方式可以做到。

用 angular 進行開發，基本上都會遇到 controller 之間通訊的問題，本文對此進行乙個總結。

在 angular 中，controller 之間通訊的方式主要有三種：

1）作用域繼承。利用子 controller 控制父 controller 上的資料。（父 controller 中的資料要為引用型別，不能是基本型別，原因參見 angularjs中的作用域一文）

2）注入服務。把需要共享的資料註冊為乙個service，在需要的 controller 中注入。

3）基於事件。利用 angular 的事件機制，使用$on、$emit和$boardcast

其中，作用域繼承僅限於上下級之間的通訊，注入服務和基於事件的機制可以實現任意級別的 controller 通訊。

在這裡可以檢視下面栗子的演示。

原理在作用域一文中有講解，這裡直接上栗子。

頁面：

data in parent controller : }

控制器：

angular.module('demo', )
.controller('parentctrl', ['$scope', function($scope)
}]).controller('childctrl', ['$scope', function($scope)])

以上是父 controller 中的資料是引用型別的情況。如果父 controller 中的資料是基本型別，可通過$scope.$parent.data訪問。

很顯然，這種方式僅適用於父子級間 controller 的通訊。

在 angular 中，服務是乙個單例，所以在服務中生成乙個物件，該物件就可以利用依賴注入的方式在所有的控制器中共享。

看個栗子，先定義乙個service:

angular.module('demo')
.factory('data', function();
})

頁面：

控制器：

.controller('childctrl1', ['$scope', 'data', function($scope, data)])
.controller('childctrl2', ['$scope', 'data', function($scope, data)])

這種方式適用於任何需要通訊的 controller 之間。

angular 為$scope提供了冒泡和隧道機制，$broadcast會把事件廣播給所有子 controller，而$emit則會將事件冒泡傳遞給父 controller，$on則是 angular 的事件監聽函式，利用這三者，可以實現上下級和同級（需要構造乙個共同的父級 controller）之間的通訊。

這種情況下比較簡單。

如果是子 controller 往父 controller 上傳送事件（從作用域往上傳送事件），使用scope.$emit

$scope.$emit("someevent", {});

如果是父 controller 往子 controller 上傳送事件（從作用域往下傳送事件），使用scope.$broadcast

$scope.$broadcast("someevent", {});

無論是$emit還是$broadcast傳送的事件，都用$scope.$on接收：

$scope.$on("someevent", function(event, data) );

同級之間利用事件通訊有兩種方法。一種是利用上下級之間事件傳播的變形，另一種是借助$rootscope。

借助父 controller

先看第一種，在子 controller 中向父 controller 觸發乙個事件，然後在父 controller 中監聽事件，再廣播給子 controller ，這樣通過事件攜帶的引數，實現了資料經過父 controller，在同級 controller 之間傳播。

但是要注意，通過父 controller 作為中介進行傳遞的話，子 controller 觸發的事件名和父 controller 廣播用的事件名不能一樣，否則會進入死迴圈。

看**：

關鍵部分在控制器：

.controller('outerctrl', ['$scope', function($scope))
}]).controller('innerctrl1', ['$scope', function($scope)
$scope.$on('changedata', function(event, data))
}]).controller('innerctrl2', ['$scope', function($scope)
// 3. 監聽到 changedata 事件後，改變子 ctrl2 中 資料
$scope.$on('changedata', function(event, data))
}])

借助 $rootscope

每個 angular 應用預設有乙個根作用域$rootscope，根作用域位於最頂層，從它往下掛著各級作用域。

所以，如果子控制器直接使用$rootscope廣播和接收事件，那麼就可實現同級之間的通訊。

看栗子：

控制器：

.controller('innerctrla', ['$scope', '$rootscope', function($scope, $rootscope)
$rootscope.$on('namechanged', function(event, data))
}]).controller('innerctrlb', ['$scope', '$rootscope', function($scope, $rootscope)
// 監聽事件
$rootscope.$on('namechanged', function(event, data))
}])

angular controller之間通訊方式

程式之間通訊

EXE之間通訊

元件之間通訊

angular controller之間通訊方式

程式之間通訊

EXE之間通訊

元件之間通訊

相關推薦