AngularJS開發(fā)教程之控制器之間的通信方法分析

更新時(shí)間：2016年12月25日 11:03:56 作者：小小平凡世界

這篇文章主要介紹了AngularJS開發(fā)教程之控制器之間的通信方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了AngularJS控制器之間通信的三種常用方式及相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS開發(fā)教程之控制器之間的通信方法。分享給大家供大家參考，具體如下：

一、指令與控制器之間通信，無(wú)非是以下幾種方法：

基于scope繼承的方式

基于event傳播的方式

service的方式（單例模式）

二、基于scope繼承的方式：

最簡(jiǎn)單的讓控制器之間進(jìn)行通信的方法是通過(guò)scope的繼承。假設(shè)有兩個(gè)控制器Parent、Child，Child 在 Parent 內(nèi)，那Child 可以稱為控制器Parent的子控制器，它將繼承父控制器Parent的scope。這樣，Child就可以訪問(wèn)到Parent的scope中的所有函數(shù)和變量了。

需要注意的是，由于scope的繼承是基于Js的原型繼承，如果變量是基本類型的，那在Child中的修改（寫），有可能會(huì)導(dǎo)致Parent中的數(shù)據(jù)變臟。

例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>基于scope繼承的方式</title>
</head>
<body ng-app = "myApp">
  <div ng-controller = "parent">
      <p>引用類型：{{obj.value}}</p>
      <p>引用類型：{{value}}</p>
      <a href="javascript:;" ng-click = "parent('parent')">點(diǎn)我</a>
    <div ng-controller="child">
      <p>引用類型：{{obj.value}}</p>
      <p>引用類型：{{value}}</p>
      <a href="javascript:;" ng-click = "child('child')">點(diǎn)我</a>
    </div>
  </div>
  <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
  <script>
    var app = angular.module("myApp",[],function(){console.log("start")});
    app.controller("parent",function($scope){
      $scope.parent = function(newchild){
        // 這里不能都單獨(dú)寫成$scope.obj={value:newchild}
        $scope.obj={value:newchild};
        $scope.value = newchild;
      }
    });
    app.controller("child",function($scope){
      $scope.child = function(newchild){
        $scope.value = newchild;
        $scope.obj.value=newchild;
      }
    });
  </script>
</body>
</html>

三、基于事件的方式：

在一般情況下基于繼承的方式已經(jīng)足夠滿足大部分情況了，但是這種方式?jīng)]有實(shí)現(xiàn)兄弟控制器之間的通信方式，所以引出了事件的方式 ?；谑录姆绞街形覀兛梢岳锩孀饔玫膐n,on,emit,boardcast這幾個(gè)方式來(lái)實(shí)現(xiàn)，其中boardcast這幾個(gè)方式來(lái)實(shí)現(xiàn)，其中on表示事件監(jiān)聽(tīng)，emit表示向父級(jí)以上的作用域觸發(fā)事件，emit表示向父級(jí)以上的作用域觸發(fā)事件，boardcast表示向子級(jí)以下的作用域廣播事件。

子到父通過(guò) $emit 注冊(cè)事件，例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>基于事件傳播子到父</title>
</head>
<body ng-app = "myApp">
  <h3>$on,$emit,$boardcast這幾個(gè)方式來(lái)實(shí)現(xiàn)，其中$on表示事件監(jiān)聽(tīng)，$emit表示向父級(jí)以上的 作用域觸發(fā)事件， $boardcast表示向子級(jí)以下的作用域廣播事件</h3>
  <div ng-controller = "parent">
      <p>引用類型：{{value}}</p>
    <div ng-controller="child">
      <a href="javascript:;" ng-click = "child('child')">子傳值到父</a>
    </div>
  </div>
  <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
  <script>
    var app = angular.module("myApp",[],function(){console.log("start")});
    app.controller("parent",function($scope){
      $scope.$on("pfan",function(e,data){
        $scope.value = data;
      })
    });
    app.controller("child",function($scope){
      $scope.child = function(newchild){
        $scope.value = newchild;
        $scope.$emit("pfan",$scope.value)
      }
    });
  </script>
</body>
</html>

父到子通過(guò)$broadcast注冊(cè)事件，但其實(shí)感覺(jué)有點(diǎn)多余，本事父就是可以共享給子的，例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>基于事件傳播父到子</title>
</head>
<body ng-app = "myApp">
  <h3>$on,$emit,$boardcast這幾個(gè)方式來(lái)實(shí)現(xiàn)，其中$on表示事件監(jiān)聽(tīng)，$emit表示向父級(jí)以上的 作用域觸發(fā)事件， $boardcast表示向子級(jí)以下的作用域廣播事件</h3>
  基于事件傳播父到子，這里本事父就可以到子，感覺(jué)有點(diǎn)多余
  <div ng-controller = "parent">
      <a href="javascript:;" ng-click = "parent('child')">子傳值到父</a>
    <div ng-controller="child">
      <p>引用類型：{{value}}</p>
    </div>
  </div>
  <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
  <script>
    var app = angular.module("myApp",[],function(){console.log("start")});
    app.controller("parent",function($scope){
      $scope.parent = function(newchild){
        $scope.value = newchild;
        $scope.$broadcast("pfan",$scope.value)
      }
    });
    app.controller("child",function($scope){
      $scope.$on("pfan",function(e,data){
        $scope.value = data;
      })
    });
  </script>
</body>
</html>

同級(jí)之間

擁有同個(gè)父scope的子級(jí)scope之間，也就是兄弟/相鄰scope之間的通信，其實(shí)是借助共同父級(jí)傳遞消息的：

子級(jí)scope中有誰(shuí)想傳消息了，emit一個(gè)給“奶爸”然后通過(guò)“奶爸”emit一個(gè)給“奶爸”然后通過(guò)“奶爸”broadcast 給所有孩子這個(gè)相同的信息，當(dāng)然發(fā)出信息的那個(gè)可以選擇是否要忽略掉自己發(fā)出的信息

四、angular服務(wù)的方式：

在ng中服務(wù)是一個(gè)單例，所以在服務(wù)中生成一個(gè)對(duì)象，該對(duì)象就可以利用依賴注入的方式在所有的控制器中共享。參照以下例子，在一個(gè)控制器修改了服務(wù)對(duì)象的值，在另一個(gè)控制器中獲取到修改后的值：

var app = angular.module('myApp', []);
app.factory('instance', function(){
  return {};
});
app.controller('MainCtrl', function($scope, instance) {
 $scope.change = function() {
    instance.name = $scope.test;
 };
});
app.controller('sideCtrl', function($scope, instance) {
  $scope.add = function() {
    $scope.name = instance.name;
  };
});

html：

<div ng-controller="MainCtrl">
   <input type="text" ng-model="test" />
   <div ng-click="change()">click me</div>
</div>
<div ng-controller="sideCtrl">
  <div ng-click="add()">my name {{name}}</div>
</div>

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

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

您可能感興趣的文章: