本篇文章主要介紹了詳解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: '<p><input type="text" ng-model="userName"/>{{userName}}</p>',
replace: true
}
});這時候當運行頁面的時候發現只要有一個input中的輸入變化了，這時候所有的nput的內容都會變化：
這樣就會面臨一個問題：我們的指令無法單獨使用,於是就有了獨立作用域的概念。
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict: 'AE',
scope:{},
template: '<p><input type="text" ng-model="userName"/>{{userName}}</p>',
replace: true
}
});透過把scope設定為{}，那麼每一個指令就具有自己獨立的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，其值为‘百威'-->
<p ng-controller="MyCtrl">
<drink flavor="{{ctrlFlavor}}"></drink>
</p>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="ScopeAt.js"></script>
</html>看看ScopeAt中的內容：
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
//在控制器中$scope中设置了ctrlFlavor属性
}])
//定义了drink指令
myModule.directive("drink", function() {
return {
restrict:'AE',
template:"<p>{{flavor}}</p>" ,
link:function(scope,element,attrs){
scope.flavor=attrs.flavor;
//链接的时候把drink指令上的flavor属性放在scope中，然后在template中显示
}
}
});這時候的DOM結構如下：
但是，這種方式要通過attrs.flavor來取得這個指令的屬性值，然後需要把這個屬性值綁定到scope物件上，最後在template中才能透過{{}}這個形式取得到scope中的值!
第二步：我們使用上面的@來取代第一種方式，因為它每次都需要自己指定link函數：
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:"<p>{{flavor}}</p>"
}
});這種方式就是把指令drink中的flavor屬性值綁定到scope物件上，而且這是ng為我們自動綁定的。不過，@綁定綁定的是字串,而不是物件!
#第三個步驟：我們來學習雙向數據綁定
<!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--> <p ng-controller="MyCtrl"> Ctrl: <br> <!--第一个输入框输入值绑定到ctrlFlavor，也就是控制器MyCtrl对应的ctrlFlavor值中--> <input type="text" ng-model="ctrlFlavor"> <br> Directive: <br> <!--第二个输入框还是通过指令的方式来完成的--> <drink flavor="ctrlFlavor"></drink> </p> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="ScopeEqual.js"></script> </html>
我們再來看看控制器中內容
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中的双向数据绑定！
},
template:'<input type="text" ng-model="flavor"/>'
}
});這就是'='這種綁定方式。其實現了雙向的資料綁定策略。我們來看看最後的DOM結構是怎麼樣的：
其實雙向資料綁定
#第四步：我們使用&綁定策略來完成對controller父級方法的呼叫：
<!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> <p ng-controller="MyCtrl"> <!--接下来是三个自定义的指令greeting指令--> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> </p> </body> <script src="framework/angular-1.3.0.14/angular.js"></script> <script src="ScopeAnd.js"></script> </html>
其中定義了三個指令greeting,每一個指令都需要呼叫controller中的一個sayHello方法，（angularjs中如何實作控制器和指令之間交互指出了可以透過定義屬性的方式使得控制器和指令之間進行交互，不過這裡我們可以透過簡單的&完成同樣的功能）並且傳入不同的參數name值：
var myModule = angular.module("MyModule", []);
//为控制器指定了一个sayHello方法，同时为这个方法可以传入一个参数
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello=function(name){
alert("Hello "+name);
}
}])
myModule.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'//传递一个来自父scope的函数用于稍后调用，获取greet参数，得到sayHello(name)函数
},
//在template中我们在ng-click中指定一个参数，其指定方式为调用controller中greet方法，传入的参数name值为username
//也就是ng-model='userName'中指定的参数
template:'<input type="text" ng-model="userName" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
}
});透過&就可以完成對父級作用方法的調用，而不是採用傳統的透過為指令指定屬性的方式完成控制器和指令之間的通行!
以上是angularjs中關於隔離作用域的理解以及綁定策略的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
