大家在使用angularjs的時(shí)候锄俄，很容易忽略AngularJS自帶指令的作用域問(wèn)題源譬，有一些指令會(huì)產(chǎn)生獨(dú)立的自己作用域诅诱，造成子級(jí)無(wú)法與父級(jí)作用域雙向綁定的問(wèn)題千贯。這些指令目前有<code>ng-include</code>屯仗、<code>ng-view</code>、<code>ng-switch</code>丈牢、<code>ng-repeat</code>祭钉。這樣的原因是因?yàn)椋@些指令雖然是AngularJS內(nèi)部定義的己沛，但是也是和<code>directive</code>實(shí)現(xiàn)的方法都是一樣的慌核，其內(nèi)部使用的是<code>scope:true</code>的方式，子作用域繼承了父級(jí)的作用申尼，并且構(gòu)建了一個(gè)獨(dú)立的子作用域垮卓，所有雙向綁定實(shí)現(xiàn)不了，只能單獨(dú)實(shí)現(xiàn)子級(jí)作用域繼承父級(jí)的屬性师幕。<p>
AngularJS的繼承是通過(guò)javascript的原型繼承方式實(shí)現(xiàn)的粟按，進(jìn)行原型繼承即意味著父作用域在子作用域的原型鏈上。因?yàn)樵玩湹臋z索只會(huì)在屬性檢索的時(shí)候觸發(fā)霹粥，不會(huì)在改變屬性值的時(shí)候觸發(fā)灭将。所以我們需要把原始類(lèi)型轉(zhuǎn)換成對(duì)象，把值綁定在對(duì)象的屬性上后控。<p>
大家可以在示例上看到庙曙，經(jīng)過(guò)改造之后，就可以實(shí)現(xiàn)子級(jí)修改父級(jí)作用域的屬性浩淘。原始類(lèi)型只能繼承父類(lèi)的作用域捌朴。實(shí)現(xiàn)方法目前看有三種，下面一次來(lái)介紹<p>
通過(guò)給父級(jí)scope上添加<code>{}</code>來(lái)實(shí)現(xiàn)张抄，把原始類(lèi)型轉(zhuǎn)換成對(duì)象砂蔽。代碼如下：
<!DOCTYPE html>
<html lang="en" ng-app="childScope">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
<style>
.inputOne{
width: 100px;
height: 50px;
background: skyblue;
}
.inner{
border: 1px solid skyblue;
width: 200px;
height: 150px;
}
.outer{
border: 1px solid salmon;
width: 200px;
height: 150px;
}
.sco{
background: skyblue;
}
</style>
</head>
<body ng-controller="childCon">
<div class="inner">
<h3>父級(jí)作用域</h3>
<span>{{vm.private1}}</span>
<span>{{vm.private2}}</span>
</div>
<div class="outer">
<h3>自己作用域</h3>
<div class="one" ng-include src="'one.html'"></div>
<div class="two" ng-include src="'two.html'"></div>
</div>
</body>
<script>
var app=angular.module("childScope",['template'])
.controller("childCon",["$scope", function ($scope) {
var vm=$scope.vm={};
vm.private1=12;
vm.private2=13;
$scope.test=123;
}]);
var template=angular.module("template",[])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("one.html","" +
"<div><input type='text' ng-model='vm.private1'/></div>")
}])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("two.html","" +
"<div><input type='text' ng-model='vm.private2'/>" +
"<div class='sco'><span>原始類(lèi)型</span>{{test}}</div>" +
"</div>")
}])
</script>
</html>
通過(guò)<code>controller as</code>語(yǔ)法來(lái)實(shí)現(xiàn)
<code>controller as</code>其實(shí)相當(dāng)于controller的示例對(duì)象，原理還是把原始類(lèi)型轉(zhuǎn)換成對(duì)象類(lèi)型署惯。
<!DOCTYPE html>
<html lang="en" ng-app="childScope">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
<style>
.inputOne{
width: 100px;
height: 50px;
background: skyblue;
}
.inner{
border: 1px solid skyblue;
width: 200px;
height: 150px;
}
.outer{
border: 1px solid salmon;
width: 200px;
height: 150px;
}
.sco{
background: skyblue;
}
</style>
</head>
<body ng-controller="childCon as vm">
<div class="inner">
<h3>父級(jí)作用域</h3>
<span>{{vm.private1}}</span>
<span>{{vm.private2}}</span>
</div>
<div class="outer">
<h3>自己作用域</h3>
<div class="one" ng-include src="'one.html'"></div>
<div class="two" ng-include src="'two.html'"></div>
</div>
</body>
<script>
var app=angular.module("childScope",['template'])
.controller("childCon",["$scope", function ($scope) {
this.private1=12;
this.private2=22;
$scope.test=123;
}]);
var template=angular.module("template",[])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("one.html","" +
"<div><input type='text' ng-model='vm.private1'/></div>")
}])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("two.html","" +
"<div><input type='text' ng-model='vm.private2'/>" +
"<div class='sco'><span>原始類(lèi)型</span>{{test}}</div>" +
"</div>")
}])
</script>
</html>
使用<code>$parent.name</code>調(diào)用內(nèi)部方法來(lái)實(shí)現(xiàn)左驾。
進(jìn)行原型繼承即意味著父作用域在子作用域的原型鏈上，這是JavaScript的特性极谊。AngularJS的作用域還存在如下內(nèi)部定義的關(guān)系：
<ul>
<li>scope.$parent指向scope的父作用域诡右；</li>
<li>scope.$$childHead指向scope的第一個(gè)子作用域；</li>
<li>scope.$$childTail指向scope的最后一個(gè)子作用域怀酷；</li>
<li>scope.$$nextSibling指向scope的下一個(gè)相鄰作用域稻爬；</li>
<li>scope.$$prevSibling指向scope的上一個(gè)相鄰作用域；</li>
</ul>
通過(guò)在子級(jí)作用域中使用<code>scope.$parent.name</code>蜕依，來(lái)獲取對(duì)父級(jí)作用域的雙向綁定桅锄。
示例如下：
<!DOCTYPE html>
<html lang="en" ng-app="childScope">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
<style>
.inputOne{
width: 100px;
height: 50px;
background: skyblue;
}
.inner{
border: 1px solid skyblue;
width: 200px;
height: 150px;
}
.outer{
border: 1px solid salmon;
width: 200px;
height: 150px;
}
.sco{
background: skyblue;
}
</style>
</head>
<body ng-controller="childCon">
<div class="inner">
<h3>父級(jí)作用域</h3>
<span>{{private1}}</span>
<span>{{private2}}</span>
</div>
<div class="outer">
<h3>自己作用域</h3>
<div class="one" ng-include src="'one.html'"></div>
<div class="two" ng-include src="'two.html'"></div>
</div>
</body>
<script>
var app=angular.module("childScope",['template'])
.controller("childCon",["$scope", function ($scope) {
$scope.private1=12;
$scope.private2=22;
$scope.test=123;
}]);
var template=angular.module("template",[])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("one.html","" +
"<div><input type='text' ng-model='$parent.private1'/></div>")
}])
.run(["$templateCache", function ($templateCache) {
$templateCache.put("two.html","" +
"<div><input type='text' ng-model='$parent.private2'/>" +
"<div class='sco'><span>原始類(lèi)型</span>{{test}}</div>" +
"</div>")
}])
</script>
</html>
大家如果有什么疑問(wèn)琉雳，歡迎提出來(lái)。<p>
