我在以前的文章里寫過關于指令的作用域繼承與格里，指令作用域繼承與隔離，可以在<code>directive</code>中通過<code>scope={}</code>實現。controller可以實現繼承和隔離，首先繼承是依賴于<code>scope</code>樹的，也就是說只要存在了<code>scope</code>就能實現繼承，隔離也只是在特定條件下才形成的隔離（這種思路和指令的繼承與隔離很相似，其實道理也一樣）。對于<code>controller</code>與<code>directive</code>都存在基本類型與引用類型的區別。今天先說一個<code>controller</code>。
下面是繼承效果:
繼承
<!DOCTYPE html>
<html lang="en" ng-app="messageApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
</head>
<body ng-controller="parentController">
<h1>基本類型:{{value}}</h1>
<h1>引用類型:{{obj.value}}</h1>
<input type="button" ng-click="parentChange('parent')" value="parent"/>
<div ng-controller="childController">
<h1>基本類型:{{value}}</h1>
<h1>引用類型:{{obj.value}}</h1>
<input type="button" ng-click="childChange('child')" value="child"/>
</div>
</body>
<script>
var app=angular.module("messageApp",[])
.controller("parentController",["$scope",function($scope){
var obj=$scope.obj={};
$scope.value="default";
obj.value="default";
$scope.parentChange= function (data) {
$scope.value=data;
var obj=$scope.obj={};
obj.value=data;
}
}])
.controller("childController",["$scope",function($scope){
$scope.childChange= function (data) {
$scope.value=data;
obj.value=data;
}
}])
</script>
</html>
這里可以看到，基本類型和引用類型在初始化啟動的時候，會默認繼承父作用域，不管是基本類型和引用類型都會繼承。但是點擊child和parent兩個按鈕的時候，引用類型的數據都會與父作用域一致，只有點擊child的時候，子作用域的基本類型才會被重新設置。原因就是，引用類型的原型都指向了一個對象obj，每次都會找到這里。
下面是隔離效果:
2.gif
<!DOCTYPE html>
<html lang="en" ng-app="messageApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
</head>
<body ng-controller="parentController">
<h1>基本類型:{{value}}</h1>
<h1>引用類型:{{obj.value}}</h1>
<input type="button" ng-click="parentChange('parent')" value="parent"/>
<div ng-controller="childController">
<h1>基本類型:{{value}}</h1>
<h1>引用類型:{{obj.value}}</h1>
<input type="button" ng-click="childChange('child')" value="child"/>
</div>
</body>
<script>
var app=angular.module("messageApp",[])
.controller("parentController",["$scope",function($scope){
var obj=$scope.obj={};
$scope.value="default";
obj.value="default";
$scope.parentChange= function (data) {
$scope.value=data;
var obj=$scope.obj={};
obj.value=data;
}
}])
.controller("childController",["$scope",function($scope){
$scope.childChange= function (data) {
var obj=$scope.obj={};
$scope.value=data;
obj.value=data;
}
}])
</script>
</html>
兩個的區別就是隔離的時候，子作用域通過<code>var obj=$scope.obj={};</code>又形成了一個引用對象，這樣就不會同父作用域使用同一個引用對象。
