溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我們首先看下面的例子：
<!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
}
});
這時候當運行頁面的時候發現只要有一個input中的輸入變化了，這時候所有的nput的內容都會變化：
這樣就會面臨一個問題：我們的指令無法單獨使用,于是就有了獨立作用域的概念。
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中最重要的概念是：綁定策略。其具有綁定策略如下：
第一步：我們看看原始的方式，也就是不使用上面的三種綁定方式
<!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中的內容：
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結構如下：
但是，這種方式要通過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:"<div>{{flavor}}</div>"
}
});
這種方式就是把指令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--> <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>
我們再來看看控制器中內容
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結構是怎么樣的：
其實雙向數據綁定<drink flavor="ctrlFlavor"></drink>是很明顯的，需要好好理解雙向數據綁定(指令和控制器之間的雙向數據綁定)
第四步：我們使用&綁定策略來完成對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> <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,每一個指令都需要調用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/>'
}
});
通過&就可以完成對父級作用方法的調用，而不是采用傳統的通過為指令指定屬性的方式完成控制器和指令之間的通行!
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
