一,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>