Angularjs的Controller間通信機制實例分析

來源：懂視網責編：小采時間：2020-11-27 20:28:51

Angularjs的Controller間通信機制實例分析

Angularjs的Controller間通信機制實例分析:本文實例講述了Angularjs的Controller間通信機制。分享給大家供大家參考，具體如下：在Angularjs開發一些經驗總結中提到我們需要按照業務區分angular controller，避免過大無所不能的上帝controller，我們把controller分離開了，但是有時候我們需要

推薦度：

點擊下載本文 文檔為doc格式

導讀Angularjs的Controller間通信機制實例分析:本文實例講述了Angularjs的Controller間通信機制。分享給大家供大家參考，具體如下：在Angularjs開發一些經驗總結中提到我們需要按照業務區分angular controller，避免過大無所不能的上帝controller，我們把controller分離開了，但是有時候我們需要

本文實例講述了Angularjs的Controller間通信機制。分享給大家供大家參考，具體如下：

在Angularjs開發一些經驗總結中提到我們需要按照業務區分angular controller，避免過大無所不能的上帝controller，我們把controller分離開了，但是有時候我們需要在controller中通信，一般為比較簡單的通信機制，告訴同伴controller我的某個你所關心的東西改變了，怎么辦？如果你是一個javascript程序員你會很自然的想到異步回調響應式通信—事件機制(或消息機制)。對，這就是angularjs解決controller之間通信的機制，所推薦的唯一方式，簡而言之這就是angular way。

Angularjs為在scope中為我們提供了冒泡和隧道機制，$broadcast會把事件廣播給所有子controller，而$emit則會將事件冒泡傳遞給父controller，$on則是angularjs的事件注冊函數，有了這一些我們就能很快的以angularjs的方式去解決angularjs controller之間的通信，代碼如下：

View:

<div ng-app="app" ng-controller="parentCtr">
 <div ng-controller="childCtr1">name :
 <input ng-model="name" type="text" ng-change="change(name);" />
 </div>
 <div ng-controller="childCtr2">Ctr1 name:
 <input ng-model="ctr1Name" />
 </div>
</div>

Controller:

angular.module("app", []).controller("parentCtr",
function ($scope) {
 $scope.$on("Ctr1NameChange",
 function (event, msg) {
 console.log("parent", msg);
 $scope.$broadcast("Ctr1NameChangeFromParrent", msg);
 });
}).controller("childCtr1", function ($scope) {
 $scope.change = function (name) {
 console.log("childCtr1", name);
 $scope.$emit("Ctr1NameChange", name);
 };
}).controller("childCtr2", function ($scope) {
 $scope.$on("Ctr1NameChangeFromParrent",
 function (event, msg) {
 console.log("childCtr2", msg);
 $scope.ctr1Name = msg;
 });
});

這里childCtr1的name改變會以冒泡傳遞給父controller，而父controller會對事件包裝在廣播給所有子controller，而childCtr2則注冊了change事件，并改變自己。注意父controller在廣播時候一定要改變事件name。

jsfiddle鏈接：http://jsfiddle.net/whitewolf/5JBA7/15/

希望本文所述對大家AngularJS程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com