AngularJS自帶指令 ng-include、ng-view、ng-switch、ng-repeat 以及人為添加的子controller，都是和directive實現方法一樣，內部使用scope:true方式，子作用域繼承了父級且構建了一個獨立的子作用域，所有雙向綁定實現不了，只能單獨實現子級作用域繼承父級的屬性。
采用$scope.vm.key
AngularJS的繼承是通過javascript的原型繼承方式實現的，進行原型繼承即意味著父作用域在子作用域的原型鏈上。因為原型鏈的檢索只會在屬性檢索的時候觸發，不會在改變屬性值的時候觸發。所以我們需要把原始類型轉換成對象，把值綁定在對象的屬性上。
例如:
var child={};
var parents={life:{name:'hello'}};
child.__proto__=parents;
child.life.name='ok';
console.log(parents.life.name)//ok
子繼承父時,如果繼承了一個對象,則對子的對象的修改也會影響到父,即完成了一次雙向綁定
同理,
<!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>
</head>
<body ng-controller="childCon">
<div class="inner">
<h3>父級作用域</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>
采用controller as
controller as其實相當于controller的示例對象，原理還是把原始類型轉換成對象類型。
<!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>
</head>
<body ng-controller="childCon as vm">
<div class="inner">
<h3>父級作用域</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>
使用$parent.name調用內部方法來實現。
AngularJS的作用域還存在如下內部定義的關系：
scope.$parent指向scope的父作用域；
scope.$$childHead指向scope的第一個子作用域；
scope.$$childTail指向scope的最后一個子作用域；
scope.$$nextSibling指向scope的下一個相鄰作用域；
scope.$$prevSibling指向scope的上一個相鄰作用域；
通過在子級作用域中使用scope.$parent.name，來獲取對父級作用域的雙向綁定。
<!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>
</head>
<body ng-controller="childCon">
<div class="inner">
<h3>父級作用域</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>
