AngularJs的作用域问题,如果之前很好的学习并应用过JavaScript,那么对作用域、作用域链以及闭包的概念肯定不会陌生,总之一句话就是:子级可以访问父级的变量和对象,但父级无法访问子级的任何变量和对象。
如下代码:
2 | var obj1 = {name : 'K`illCode个人技术博客' }; |
4 | console.log(obj1.name); |
|
详情可参考这篇文章:《JavaScript面试题(闭包+作用域+变量提升)》。
在AngularJs中同样也存在作用域的问题,请看以下代码:
html部分:
1 | <div ng-app= "app" ng-controller= "ctr1" > |
2 | <input type = "text" ng-model= "data.name" > |
3 | <div ng-controller= "ctr2" > |
|
JavaScript部分:
1 | var m = angular.module( 'app' , []); |
2 | m.controller( 'ctr1' , [ '$scope' , function ($scope){ |
4 | name : 'K`illCode个人技术博客' |
7 | m.controller( 'ctr2' , [ '$scope' , function ($scope){ |
8 | $scope.name = 'K`illCode AngularJs学习笔记' ; |
|
然后在input输入框中改变value值,发现控制器ctr2中的值也在发生变化,原因如下:
控制器ctr2中并没有data.name这个值,所以在html中进行访问的之后,发现没有,所以就去它的上一级ctr1中去找,这时候找到了有data.name,所以就引用了ctr1中的值。
注意,我们定义的data是一个对象,js中对象的引用是【传址】的,所以即便ctr2中没有data对象,也不会去自动创建,它是一直引用ctr1中的data对象。
但是如果是一个普通的变量,而不是对象,如果在本控制器中发现没有这个值,当手动通过ng-model改变值的时候,它会在本控制器里边自动创建这个变量,并且实时更新html中的数据,代码如下:
html部分:
1 | <div ng-app= "app" ng-controller= "ctr1" > |
2 | <div ng-controller= "ctr2" > |
3 | <input type = "text" ng-model= "name" > |
|
JavaScript部分:
1 | var m = angular.module( 'app' , []); |
2 | m.controller( 'ctr1' , [ '$scope' , function ($scope){ |
3 | $scope.name = 'K`illCode个人技术博客' ; |
5 | m.controller( 'ctr2' , [ '$scope' , function ($scope){ |
|
默认情况下,在html中访问name值,控制器ctr2中没有,就会去父级ctr1中找,找到之后进行显示。当通过ng-model手动改变ctr1中的name值的时候,就会自动在ctr2中创建一个name变量。