大家在使用angularjs的時(shí)候，很容易忽略AngularJS自帶指令的作用域問題，有一些指令會(huì)產(chǎn)生獨(dú)立的自己作用域，造成子級(jí)無法與父級(jí)作用域雙向綁定的問題。這些指令目前有<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的繼承是通過javascript的原型繼承方式實(shí)現(xiàn)的，進(jìn)行原型繼承即意味著父作用域在子作用域的原型鏈上。因?yàn)樵玩湹臋z索只會(huì)在屬性檢索的時(shí)候觸發(fā)，不會(huì)在改變屬性值的時(shí)候觸發(fā)。所以我們需要把原始類型轉(zhuǎn)換成對(duì)象，把值綁定在對(duì)象的屬性上。<p>
大家可以在示例上看到，經(jīng)過改造之后，就可以實(shí)現(xiàn)子級(jí)修改父級(jí)作用域的屬性。原始類型只能繼承父類的作用域。實(shí)現(xiàn)方法目前看有三種，下面一次來介紹<p>
通過給父級(jí)scope上添加<code>{}</code>來實(shí)現(xiàn)，把原始類型轉(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>原始類型</span>{{test}}</div>" +
"</div>")
}])
</script>
</html>
通過<code>controller as</code>語法來實(shí)現(xiàn)
<code>controller as</code>其實(shí)相當(dāng)于controller的示例對(duì)象，原理還是把原始類型轉(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 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>原始類型</span>{{test}}</div>" +
"</div>")
}])
</script>
</html>
使用<code>$parent.name</code>調(diào)用內(nè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>
通過在子級(jí)作用域中使用<code>scope.$parent.name</code>，來獲取對(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>原始類型</span>{{test}}</div>" +
"</div>")
}])
</script>
</html>
大家如果有什么疑問，歡迎提出來。<p>
