本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答