国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-19 19:01:56
字體:
來源:轉載
供稿:網友

本文實例講述了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程序設計有所幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 赤城县| 磐安县| 灵武市| 玛多县| 英德市| 阿尔山市| 介休市| 延川县| 社会| 色达县| 曲松县| 重庆市| 新竹县| 筠连县| 天柱县| 土默特左旗| 祥云县| 修武县| 镇巴县| 宝坻区| 宁明县| 湟中县| 明水县| 新野县| 当涂县| 大方县| 固始县| 土默特右旗| 辽阳县| 辽宁省| 巧家县| 永康市| 泾阳县| 汝阳县| 井陉县| 沁源县| 饶河县| 固始县| 依兰县| 胶南市| 定州市|