angular中的scope(向权威教程致敬)

作者 likaiqiang 日期 2017-03-10
angular中的scope(向权威教程致敬)

之前看了一段时间的angular权威教程,陆陆续续写了几个demo,这里主要整理一下angularjs中的scope。

普通的子控制器继承父控制器

<body ng-app='MyApp'>
<div ng-controller='ParentControler'>
<div ng-controller='ChildController'></div>
</div>
<script src='../angular.min.js'></script>
<script>
var app = angular.module('MyApp',[]);
app.controller('ParentControler',function($scope){
$scope.aString = 'scope string';
$scope.aNumber = 100;
$scope.anArray = [10,20,30];
$scope.anObject = {
"property1": "parent prop1",
"property2": "parent prop2"
};
$scope.aFunction = function(){
return 'parent output'
}
});
app.controller('ChildController',function($scope){
console.log($scope);
console.log($scope.anArray);
})
</script>
</body>

运行结果

和js的原型继承一样,childScope中并没用aString aNumber aObject aArray aFunction这些属性,这些属性在parentScope中,如果在childScope中直接访问这些属性,会像js的原型链一样一直往上找,直到$rootScope

修改demo1,让它输出parent中的某个值

执行结果

他访问到了父作用域中的值

基于第一种情况,在childScope直接对parentScope中的属性进行写操作。

对象和数组整体重新赋值

app.controller('ChildController',function($scope){
$scope.aString = 'hello';
$scope.aNumber = 200;
$scope.anArray = [];
$scope.anObject = {"a":1,"b":2};

$scope.aFunction = function(){
return 'child output'
}
console.log($scope);
})

运行结果

对对象或者数组中的某个属性重命名

app.controller('ChildController',function($scope){
$scope.aString = 'hello';
$scope.aNumber = 200;
$scope.anArray[2] = 999;
$scope.anObject.property1 = 'child';

$scope.aFunction = function(){
return 'child output'
}
console.log($scope);
})

运行结果

子作用域中只剩下aFunction、aNumber、aString。然后查看$parent。

我们发现$parent中的anArray[2]、anObject.property1已经被改变了。

所以,综上所述,在子作用域中直接修改父作用域下的值分3种情况:
  1. 属性类型为string、number、function(普通数据类型)时,不会查找原型链,直接在子作用域下生成同名称的属性值
  2. 属性类型为object、array(引用数据类型),直接赋值,比如,obj={},array=[],效果同第一条
  3. 属性类型为object、array(引用数据类型),对变量的某个属性赋值,则会进行原型链查找,修改父作用域下的对应值,子作用域下不会创建同名属性