AngularJS中controller作用域的继承与隔离

我在以前的文章里写过关于指令的作用域继承与格里，指令作用域继承与隔离，可以在<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>又形成了一个引用对象，这样就不会同父作用域使用同一个引用对象。