父控制器与子控制器

angularjs控制器的作用域类似于JS中函数的作用域，最大的区别在于子控制器里面的基本类型数据（string,number等）不能修改父控制器内的数据，

却可以修改父控制器中的引用类型数据（对象，数组等），先看一个例子：

父控制器为普通数据类型时的情况：

<body  >
    <div ng-controller="father">
        父控制器名字：{{name}}
        <h3>子控制器1：</h3>
        <div class="row1" ng-controller="son1">
            子控制器1名字：{{name}} <button ng-click="change()">改名字</button>
        </div>
        <h3>子控制器2：</h3>
        <div class="row2" ng-controller="son2">
            子控制器2名字：{{name}}
        </div>
    </div>
    <script>
        angular.module("main",[])
            .controller("father",["$scope",function($scope){
                $scope.name="张三"
            }])
            .controller("son1",["$scope",function($scope){
            $scope.change=function(){
                $scope.name="新名字";
            }
            }])
            .controller("son2",["$scope",function($scope){

            }])
    </script>

页面刚打开是这样：

当我们点击按钮之后：

我们发现只有子控制器数据发生改变，说明子控制器可以获取到父控制器的数据，但是不能修改

当父控制器为引用类型数据时：

我们把上面的例子稍微修改一下：

<body  >
    <div ng-controller="father">
        父控制器名字：{{data.name}}
        <h3>子控制器1：</h3>
        <div class="row1" ng-controller="son1">
            子控制器1名字：{{data.name}} <button ng-click="change()">改名字</button>
        </div>
        <h3>子控制器2：</h3>
        <div class="row2" ng-controller="son2">
            子控制器2名字：{{data.name}}
        </div>
    </div>
    <script>
        angular.module("main",[])
            .controller("father",["$scope",function($scope){
                $scope.data={}//在父控制器添加一个对象
                $scope.data.name="张三"
            }])
            .controller("son1",["$scope",function($scope){
            $scope.change=function(){
                $scope.data.name="新名字";
            }
            }])
            .controller("son2",["$scope",function($scope){

            }])
    </script>
</body>

看下结果：

点击改名字：

我们发现这三个控制器引用的都是一个对象！任何子控制器中修改的数据都是在同个对象上修改的，接下来看看更有意思的事情

利用factory实现兄弟控制器之间共享数据

我们知道angularjs中的factory服务可以实现数据共享，就像下面这样：

 

<body ng-app="main">

    <h3>控制器1：</h3>
    <p ng-controller="son1">
        子1数据：{{name | json}} 
    </p>
    <h3>控制器2：</h3>

    <p ng-controller="son2">
        子2数据：{{age | json}} 
    </p>


<script>
angular.module("main",[])

.controller("son1",["$scope","$myserver",function($scope,$myserver){
    $scope.name=$myserver.name;//张三
}])
.controller("son2",["$scope","$myserver",function($scope,$myserver){
    $scope.age=$myserver.age;//55
}])
.factory("$myserver",function(){
    return{
        name:"张三",
        age:55
    }
})
</script>
</body>

我们可以利用让兄弟控制器共同引用一块内存的原理，实现跨控制器数据共享，把代码改成这样：

<body ng-app="main">
<div ng-controller="fatherCtrl">
    <h3>控制器1：</h3>
    <p ng-controller="son1">
        子1数据：{{data | json}} <br/>
        用户名： <input type="text" ng-model="data.uname"><br/>    
        城市： <select ng-model="data.city" name="city">
                    <option>北京</option>
                    <option>天津</option>
                    <option>河北</option>
                </select>

    </p>
    <h3>控制器2：</h3>
        <p ng-controller="son2">

        子2数据：{{data | json}} 
         <br/>
        用户名： <input type="text" ng-model="data.uname"><br/>    
        城市： <select ng-model="data.city" name="city">
                    <option>北京</option>
                    <option>天津</option>
                    <option>河北</option>
                </select>
    </p>

</div>
<script>
angular.module("main",[])
.controller("fatherCtrl",["$scope",function($scope){

}])
.controller("son1",["$scope","$myserver",function($scope,$myserver){
    $scope.data=$myserver;//控制器1里面的data和控制器2里面的data指向同一块内存，所以数据是同步的
    $scope.$watch("data",function(){
        console.log($myserver);
    },true)
}])
.controller("son2",["$scope","$myserver",function($scope,$myserver){
    $scope.data=$myserver
}])
.factory("$myserver",function(){
    return{
        name:"张三"
    }
})

</script>
</body>

这样，我们不管修改的哪个控制器的内容，两个兄弟控制器中的数据都是同步的