詳解angularjs中的隔離作用域理解以及綁定策略

我們首先看下面的例子：

創(chuàng)新互聯(lián)是一家專業(yè)提供尼瀘西企業(yè)網(wǎng)站建設,專注與網(wǎng)站建設、成都網(wǎng)站設計、H5技術、小程序制作等業(yè)務。10年已為尼瀘西眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

<!doctype html> 
<html ng-app="MyModule"> 
 <head> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 </head> 
 <body> 
  <hello></hello> 
  <hello></hello> 
  <hello></hello> 
  <hello></hello> 
 </body> 
 <script src="framework/angular-1.3.0.14/angular.js"></script> 
 <script src="IsolateScope.js"></script> 
</html>

我們在看看IsolateScope中的代碼：

var myModule = angular.module("MyModule", []); 
myModule.directive("hello", function() { 
 return { 
  restrict: 'AE', 
  template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>', 
  replace: true 
 } 
});

這時候當運行頁面的時候發(fā)現(xiàn)只要有一個input中的輸入變化了，這時候所有的nput的內(nèi)容都會變化：

詳解angularjs中的隔離作用域理解以及綁定策略

這樣就會面臨一個問題：我們的指令無法單獨使用,于是就有了獨立作用域的概念。

var myModule = angular.module("MyModule", []); 
myModule.directive("hello", function() { 
 return { 
  restrict: 'AE', 
  scope:{}, 
  template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>', 
  replace: true 
 } 
});

通過把scope設置為{}，那么每一個指令就具有自己獨立的scope空間，于是就不會相互影響了。但是angularjs中最重要的概念是：綁定策略。其具有綁定策略如下：

詳解angularjs中的隔離作用域理解以及綁定策略

第一步：我們看看原始的方式，也就是不使用上面的三種綁定方式

<!doctype html> 
<html ng-app="MyModule"> 
 <head> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 </head> 
 <body> 
 <!--控制器MyCtrl下面有指令drink，同時指令drink還有自定義的屬性flavor，其值為‘百威'--> 
  <div ng-controller="MyCtrl"> 
   <drink flavor="{{ctrlFlavor}}"></drink> 
  </div> 
 </body> 
 <script src="framework/angular-1.3.0.14/angular.js"></script> 
 <script src="ScopeAt.js"></script> 
</html>

看看ScopeAt中的內(nèi)容：

var myModule = angular.module("MyModule", []); 
myModule.controller('MyCtrl', ['$scope', function($scope){ 
 $scope.ctrlFlavor="百威"; 
 //在控制器中$scope中設置了ctrlFlavor屬性 
}]) 
//定義了drink指令 
myModule.directive("drink", function() { 
 return { 
  restrict:'AE', 
  template:"<div>{{flavor}}</div>" , 
   link:function(scope,element,attrs){ 
   scope.flavor=attrs.flavor; 
   //鏈接的時候把drink指令上的flavor屬性放在scope中，然后在template中顯示 
   } 
 } 
});

這時候的DOM結構如下：

詳解angularjs中的隔離作用域理解以及綁定策略

但是，這種方式要通過attrs.flavor來獲取這個指令的屬性值，然后需要把這個屬性值綁定到scope對象上，最后在template中才能通過{{}}這種形式獲取到scope中的值!

第二步：我們使用上面的@來替換第一種方式，因為它每次都需要自己指定link函數(shù)：

var myModule = angular.module("MyModule", []); 
myModule.controller('MyCtrl', ['$scope', function($scope){ 
 $scope.ctrlFlavor="百威"; 
 //在控制器中$scope中設置了ctrlFlavor屬性 
}]) 
//定義了drink指令 
myModule.directive("drink", function() { 
 return { 
  restrict:'AE', 
  scope:{ 
   flavor:'@' 
  }, 
  template:"<div>{{flavor}}</div>" 
 } 
});

這種方式就是把指令drink中的flavor屬性值綁定到scope對象上，而且這是ng為我們自動綁定的。不過，@綁定綁定的是字符串,而不是對象!

第三步：我們來學習一下雙向數(shù)據(jù)綁定

<!doctype html> 
<html ng-app="MyModule"> 
 <head> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 </head> 
 <body> 
 <!--指定了控制器MyCtrl--> 
  <div ng-controller="MyCtrl"> 
   Ctrl: 
   <br> 
   <!--第一個輸入框輸入值綁定到ctrlFlavor，也就是控制器MyCtrl對應的ctrlFlavor值中--> 
   <input type="text" ng-model="ctrlFlavor"> 
   <br> 
   Directive: 
   <br> 
   <!--第二個輸入框還是通過指令的方式來完成的--> 
   <drink flavor="ctrlFlavor"></drink> 
  </div> 
 </body> 
 <script src="framework/angular-1.3.0.14/angular.js"></script> 
 <script src="ScopeEqual.js"></script> 
</html>

我們再來看看控制器中內(nèi)容

var myModule = angular.module("MyModule", []); 
//指定了控制器對象 
myModule.controller('MyCtrl', ['$scope', function($scope){ 
 $scope.ctrlFlavor="百威"; 
}]) 
//指定了指令 
myModule.directive("drink", function() { 
 return { 
  restrict:'AE', 
  scope:{ 
   flavor:'=' 
   //這里通過'='指定了drink指令的flavor和scope中的雙向數(shù)據(jù)綁定！ 
  }, 
  template:'<input type="text" ng-model="flavor"/>' 
 } 
});

這就是'='這種綁定方式。其實現(xiàn)了雙向的數(shù)據(jù)綁定策略。我們看看最后的DOM結構是怎么樣的：

詳解angularjs中的隔離作用域理解以及綁定策略

其實雙向數(shù)據(jù)綁定<drink flavor="ctrlFlavor"></drink>是很明顯的，需要好好理解雙向數(shù)據(jù)綁定(指令和控制器之間的雙向數(shù)據(jù)綁定)

第四步：我們使用&綁定策略來完成對controller父級方法的調(diào)用：

<!doctype html> 
<html ng-app="MyModule"> 
 <head> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 </head> 
 <body> 
  <div ng-controller="MyCtrl"> 
  <!--接下來是三個自定義的指令greeting指令--> 
   <greeting greet="sayHello(name)"></greeting> 
   <greeting greet="sayHello(name)"></greeting> 
   <greeting greet="sayHello(name)"></greeting> 
  </div> 
 </body> 
 <script src="framework/angular-1.3.0.14/angular.js"></script> 
 <script src="ScopeAnd.js"></script> 
</html>

其中定義了三個指令greeting,每一個指令都需要調(diào)用controller中的一個sayHello方法，（angularjs中如何實現(xiàn)控制器和指令之間交互指出了可以通過定義屬性的方式使得控制器和指令之間進行交互，不過這里我們可以通過簡單的&完成同樣的功能）并且傳入不同的參數(shù)name值：

var myModule = angular.module("MyModule", []); 
//為控制器指定了一個sayHello方法，同時為這個方法可以傳入一個參數(shù) 
myModule.controller('MyCtrl', ['$scope', function($scope){ 
 $scope.sayHello=function(name){ 
  alert("Hello "+name); 
 } 
}]) 
myModule.directive("greeting", function() { 
 return { 
  restrict:'AE', 
  scope:{ 
   greet:'&'//傳遞一個來自父scope的函數(shù)用于稍后調(diào)用，獲取greet參數(shù)，得到sayHello(name)函數(shù) 
  }, 
  //在template中我們在ng-click中指定一個參數(shù)，其指定方式為調(diào)用controller中greet方法，傳入的參數(shù)name值為username 
  //也就是ng-model='userName'中指定的參數(shù) 
  template:'<input type="text" ng-model="userName" /><br/>'+ 
     '<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>' 
 } 
});

通過&就可以完成對父級作用方法的調(diào)用，而不是采用傳統(tǒng)的通過為指令指定屬性的方式完成控制器和指令之間的通行!

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站欄目：詳解angularjs中的隔離作用域理解以及綁定策略
瀏覽地址：http://jinyejixie.com/article38/pggopp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、網(wǎng)頁設計公司、外貿(mào)建站、網(wǎng)站制作、微信小程序、營銷型網(wǎng)站建設

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

詳解angularjs中的隔離作用域理解以及綁定策略