angular中作用域的问题

一，angular中的$scope与this的区别。

1，引用方式的不同。

首先看一段代码：

<!DOCTYPE html>
<html ng-app='myapp'>
<head>
  <meta charset="UTF-8">
    <title>angular 中的作用域</title>
    <script src="./bower_components/angular/angular.js"></script>
</head>
<body>
  <div ng-controller='scopeCtrl' ng-cloak>
    {{test}}
  </div>
  <div ng-controller='thisCtrl as vm' ng-cloak>
    {{vm.test}}
  </div>
    <script>
        angular.module('myapp', [])
        .controller('scopeCtrl', ['$scope', function($scope){
            $scope.test = 'hello';
        }])
        .controller('thisCtrl', ['$scope', function($scope){
            this.test = 'world';
        }]);
    </script>
</body>
</html>

在 scopeCtrl 控制器中test 变量是 $scope 的一个属性，所以在html中引用直接引用即可，即使用 {{test}} 便可以获得相应的值。

在thisCtrl 控制器中 test 变量是 this 的属性，在html中引用需要连同控制器名一起加上，即 {{vm.test}} 才能获得相应的值。值得注意的是必须使用 controller as ... 的语法，才能引用到 test 的值，例如单纯使用 {{thisCtrl.test}} 是不能获得 test 的值的。具体原因还不清楚。

2，作用域继承的不同。

子控制器能够访问到父控制器中 $scope 的数据。但是不能访问到父控制器中 this 的数据。例如一下代码段：

  <div ng-controller='scopeCtrl' ng-cloak>
    {{test}}
    <div ng-controller='scopeChild'>
        {{test}}
    </div>
  </div>
  <div ng-controller='thisCtrl as vm' ng-cloak>
    {{vm.test}}
    <div ng-controller='thisChild as child'>
        {{child.test}}
    </div>
  </div>

<script>
        angular.module('myapp', [])
        .controller('scopeCtrl', ['$scope', function($scope){
            $scope.test = 'hello';
        }])
        .controller('thisCtrl', ['$scope', function($scope){
            this.test = 'world';
        }])
        .controller('scopeChild', ['$scope', function($scope){
        }])
        .controller('thisChild', ['$scope', function($scope){
        }]);
    </script>

以上代码中scopeChild 下的test能获得scopeCtrl 中test的值。但是 thisChild 下的child.test就不能获得thisCtrl 中test的值。

二，angular中$scope作用域的继承。

1，非对象数据的继承。

一般情况下，子作用域能够继承父作用域中 $scope 基本类型的值（前提是子作用于中没有重新定义父作用域中的值）。看下面的代码：

<!DOCTYPE html>
<html ng-app='myapp'>
<head>
  <meta charset="UTF-8">
    <title>angular 中的作用域</title>
    <script src="./bower_components/angular/angular.js"></script>
</head>
<body>
  <div ng-controller='parentCtrl'>
    <label>父作用域</label>
    <input type="text" name="parent" ng-model='name'>
    <div ng-controller='childCtrl'>
        <label>子作用域</label>
        <input type="text" name="child" ng-model='name'>
    </div>
  </div>
    <script>
        angular.module('myapp', [])
        .controller('parentCtrl', ['$scope', function($scope){
            $scope.name = 'hu';
        }])
        .controller('childCtrl', ['$scope', function($scope){
        }]);
    </script>
</body>
</html>

在以上代码中，在不向子作用域对应的输入框输入之前，在父作用域对应的输入框更改值时，子作用域也会跟着改变。这是因为子作用域中没用name 属性，当要对其求值时就在父作用域中查找。

如果我们在子作用域对应的输入框上做更改，父作用域对应的输入框不会有改变，这是理所应当的，因为父作用域不会继承子作用域。但是之后再更改父作用域输入框的值时，子作用域输入框的值就不再改变了。原因是当我们更改了子作用域输入框的值时，实际上是在子作用域中$scope 上创建了一个与父作用域同名的属性，之后子作用域的该属性就不再继承父作用域的属性了。

2，对象数据的继承。

对象的继承是按引用传值的，也就是说子作用域中的对象是与父作用域中某个对象是同一个对象。这样，无论是修改父作用域中的值还是修改子作用域中的值，另外一个值也会相应做出改变。部分代码如下：

<div ng-controller='parentCtrl'>
    <label>父作用域</label>
    <input type="text" name="parent" ng-model='obj.name'>
    <div ng-controller='childCtrl'>
        <label>子作用域</label>
        <input type="text" name="child" ng-model='obj.name'>
    </div>
  </div>

<script>
        angular.module('myapp', [])
        .controller('parentCtrl', ['$scope', function($scope){
            $scope.obj = {}
            $scope.obj.name = 'hu';
        }])
        .controller('childCtrl', ['$scope', function($scope){
        }]);
    </script>