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

更新時間：2017年05月31日 11:57:49 作者：liangklfang

本篇文章主要介紹了詳解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> 
  <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 
 } 
});

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

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

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設(shè)置為{}，那么每一個指令就具有自己獨立的scope空間，于是就不會相互影響了。但是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中設(shè)置了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結(jié)構(gòu)如下：

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

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

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

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

第三步：我們來學(xué)習(xí)一下雙向數(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對應(yīng)的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結(jié)構(gòu)是怎么樣的：

其實雙向數(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中g(shù)reet方法，傳入的參數(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: