快捷導(dǎo)航

Angularjs的Controller間通信機(jī)制實(shí)例分析

更新時(shí)間：2016年11月07日 14:06:31 作者：破狼

這篇文章主要介紹了Angularjs的Controller間通信機(jī)制,結(jié)合實(shí)例形式分析了Controller通信機(jī)制的原理、實(shí)現(xiàn)技巧與相關(guān)操作技巧,需要的朋友可以參考下

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

在Angularjs開(kāi)發(fā)一些經(jīng)驗(yàn)總結(jié)中提到我們需要按照業(yè)務(wù)區(qū)分angular controller，避免過(guò)大無(wú)所不能的上帝controller，我們把controller分離開(kāi)了，但是有時(shí)候我們需要在controller中通信，一般為比較簡(jiǎn)單的通信機(jī)制，告訴同伴controller我的某個(gè)你所關(guān)心的東西改變了，怎么辦？如果你是一個(gè)javascript程序員你會(huì)很自然的想到異步回調(diào)響應(yīng)式通信—事件機(jī)制(或消息機(jī)制)。對(duì)，這就是angularjs解決controller之間通信的機(jī)制，所推薦的唯一方式，簡(jiǎn)而言之這就是angular way。

Angularjs為在scope中為我們提供了冒泡和隧道機(jī)制，$broadcast會(huì)把事件廣播給所有子controller，而$emit則會(huì)將事件冒泡傳遞給父controller，$on則是angularjs的事件注冊(cè)函數(shù)，有了這一些我們就能很快的以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改變會(huì)以冒泡傳遞給父controller，而父controller會(huì)對(duì)事件包裝在廣播給所有子controller，而childCtr2則注冊(cè)了change事件，并改變自己。注意父controller在廣播時(shí)候一定要改變事件name。

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

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: