深入理解 AngularJS 的 Scope

一、遇到的问题

问题发生在使用 AngularJS 嵌套 Controller 的时候。因为每个 Controller 都有它对应的 Scope（相当于作用域、控制范围），所以 Controller 的嵌套，也就意味着 Scope 的嵌套。这个时候如果两个 Scope 内都有同名的 Model 会发生什么呢？从子 Scope 怎样更新父 Scope 里的 Model 呢？

<div ng-app="myApp">
    <div ng-controller="ParentController">
        {{parentPrimitive}}
        <br />
        {{parentObj.parentProperty}}
        <div ng-controller="ChildController">

        </div>
    </div>
</div>

var app = angular.module('myApp',[]);
app.controller('ParentController',function($scope){
    $scope.parentPrimitive = "some primitive"
    $scope.parentObj = {};
    $scope.parentObj.parentProperty = "some value";
});
app.controller('ChildController',function($scope){
    $scope.parentPrimitive = "this will NOT modify the parent"
    $scope.parentObj.parentProperty = "this WILL modify the parent";
});

结果：输出：

some primitive 
this WILL modify the parent

还有另一种方法：

1、在子作用域中使用 $parent.xxx，这样可以直接修改父作用域的属性。

eg:

$scope.$parent.parentObj = "this WILL modify the parent";