欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2016年12月25日 11:03:56   作者：小小平凡世界  
這篇文章主要介紹了AngularJS開發(fā)教程之控制器之間的通信方法,結(jié)合實例形式較為詳細(xì)的分析了AngularJS控制器之間通信的三種常用方式及相關(guān)使用技巧,需要的朋友可以參考下

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

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

基于scope繼承的方式

基于event傳播的方式

service的方式（單例模式）

二、基于scope繼承的方式：

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

需要注意的是，由于scope的繼承是基于Js的原型繼承，如果變量是基本類型的，那在Child中的修改（寫），有可能會導(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')">點我</a>
    <div ng-controller="child">
      <p>引用類型：{{obj.value}}</p>
      <p>引用類型：{{value}}</p>
      <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.parent = function(newchild){
        // 這里不能都單獨寫成$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)]有實現(xiàn)兄弟控制器之間的通信方式，所以引出了事件的方式 ?；谑录姆绞街形覀兛梢岳锩孀饔玫膐n,on,emit,boardcast這幾個方式來實現(xiàn)，其中boardcast這幾個方式來實現(xiàn)，其中on表示事件監(jiān)聽，emit表示向父級以上的作用域觸發(fā)事件，emit表示向父級以上的作用域觸發(fā)事件，boardcast表示向子級以下的作用域廣播事件。

子到父 通過 $emit 注冊事件，例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>基于事件傳播子到父</title>
</head>
<body ng-app = "myApp">
  <h3>$on,$emit,$boardcast這幾個方式來實現(xiàn)，其中$on表示事件監(jiān)聽，$emit表示向父級以上的 作用域觸發(fā)事件， $boardcast表示向子級以下的作用域廣播事件</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>

父到子通過$broadcast注冊事件，但其實感覺有點多余，本事父就是可以共享給子的，例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>基于事件傳播父到子</title>
</head>
<body ng-app = "myApp">
  <h3>$on,$emit,$boardcast這幾個方式來實現(xiàn)，其中$on表示事件監(jiān)聽，$emit表示向父級以上的 作用域觸發(fā)事件， $boardcast表示向子級以下的作用域廣播事件</h3>
  基于事件傳播父到子，這里本事父就可以到子，感覺有點多余
  <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>

同級之間

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

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

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

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

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é)》

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

相關(guān)文章

最新評論