默認(rèn)是共享作用域：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="myApp" ng-controller="mainController">
<ceshi></ceshi>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.directive('ceshi',function(){
var option = {
template:'<p>{{abc}}</p>'
};
return option;
});
myApp.controller('mainController',function($scope){
$scope.abc = 'ericzheng';
});
</script>
</body>
</html>
當(dāng)我們自己創(chuàng)建某個(gè)指令時(shí)，這個(gè)指令肯定不可能只使用一次，是要重復(fù)多次使用的，有的在一個(gè)頁面內(nèi)或者一個(gè)控制器內(nèi)需要使用多次。
類似上面的這種場景，在任何一個(gè)輸入框內(nèi)改變數(shù)據(jù)，都會(huì)導(dǎo)致其他的標(biāo)簽內(nèi)的數(shù)據(jù)一同發(fā)生改變，這顯然不是我們想要的，這個(gè)時(shí)候就需要獨(dú)立作用域了。
想轉(zhuǎn)換成獨(dú)立作用域只需要一行代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="myApp" ng-controller="mainController">
<ceshi></ceshi>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.directive('ceshi',function(){
var option = {
template:'<p>{{abc}}</p>',
scope:{}
};
return option;
});
myApp.controller('mainController',function($scope){
$scope.abc = 'ericzheng';
});
</script>
</body>
</html>
單向數(shù)據(jù)綁定：
@操作符，雙引號(hào)內(nèi)的內(nèi)容當(dāng)作字符串進(jìn)行綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="myApp" ng-controller="mainController">
<my-directive name="aaaa"></my-directive>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective',function(){
var option = {
template:'<p>wew{{name}}<p/>',
scope:{
name:'@'
}
};
return option;
});
myApp.controller('mainController',function($scope){
});
</script>
</body>
</html>
單向綁定，從當(dāng)前指令的屬性中獲取到值，然后賦值給當(dāng)前獨(dú)立作用域里的這個(gè)屬性
@.jpg
雙向數(shù)據(jù)綁定
=操作符 綁定的是個(gè)變量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="myApp" ng-controller="mainController">
<input type="text" ng-model="abc">
<my-directive name="abc"></my-directive>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective',function(){
var option = {
template:'<p>wew{{name}}<input ng-model="name"><p/>',
scope:{
name:'='
}
};
return option;
});
myApp.controller('mainController',function($scope){
$scope.abc = 'ericzheng';
});
</script>
</body>
</html>
name="abc"這個(gè)是核心，左邊聯(lián)結(jié)的是獨(dú)立作用域，右邊聯(lián)結(jié)的是外部的作用域里的模型abc
![Uploading &_876533.jpg . . .]
使用父作用域的行為
&操作符 綁定的內(nèi)容是個(gè)方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="myApp" ng-controller="mainController">
<my-directive fn1="fn2(name)"></my-directive>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective',function(){
var option = {
restrict:'E',
template:'<button ng-click="fn1({name:\'username\'})">wfewef</button>',
scope:{
fn1:'&'
}
};
return option;
});
myApp.controller('mainController',function($scope){
$scope.fn2 = function(attr){
console.log(attr);
}
});
</script>
</body>
</html>
&.jpg
如何看懂：
先不管指令內(nèi)部是怎么實(shí)現(xiàn)的，先看怎么用的，然后看一下對(duì)應(yīng)的父作用域里的變量或方法是怎么定義的。
