20、AngularJs之controller控制器scope父子集作用域实例

阅读() @2018-10-29 18:16:09

今天学习的是AngularJs的作用域问题,如果之前很好的学习并应用过JavaScript,那么对作用域、作用域链以及闭包的概念肯定不会陌生,总之一句话就是:子级可以访问父级的变量和对象,但父级无法访问子级的任何变量和对象

如下代码:

function fn1(){
	var obj1 = {name : '赵一鸣个人技术博客'};
	function fn2(){
		console.log(obj1.name);
	}
	return fn2();
}
fn1();

详情可参考这篇文章:《JavaScript面试题(闭包+作用域+变量提升)》。

在AngularJs中同样也存在作用域的问题,请看以下代码:

html部分:

<div ng-app="app" ng-controller="ctr1">
	<input type="text" ng-model="data.name">
	<div ng-controller="ctr2">
		{{data.name}}
	</div>
</div>

JavaScript部分:

var m = angular.module('app', []);
m.controller('ctr1', ['$scope', function($scope){
	$scope.data = {
		name : '赵一鸣个人技术博客'
	};
}]);
m.controller('ctr2', ['$scope', function($scope){
	$scope.name = '赵一鸣AngularJs学习笔记';
}]);

然后在input输入框中改变value值,发现控制器ctr2中的值也在发生变化,原因如下:

控制器ctr2中并没有data.name这个值,所以在html中进行访问的之后,发现没有,所以就去它的上一级ctr1中去找,这时候找到了有data.name,所以就引用了ctr1中的值。

注意,我们定义的data是一个对象,js中对象的引用是【传址】的,所以即便ctr2中没有data对象,也不会去自动创建,它是一直引用ctr1中的data对象

但是如果是一个普通的变量,而不是对象,如果在本控制器中发现没有这个值,当手动通过ng-model改变值的时候,它会在本控制器里边自动创建这个变量,并且实时更新html中的数据,代码如下:

html部分:

<div ng-app="app" ng-controller="ctr1">
	<div ng-controller="ctr2">
		<input type="text" ng-model="name">
		{{name}}
	</div>
</div>

JavaScript部分:

var m = angular.module('app', []);
m.controller('ctr1', ['$scope', function($scope){
	$scope.name = '赵一鸣个人技术博客';
}]);
m.controller('ctr2', ['$scope', function($scope){
	
}]);

默认情况下,在html中访问name值,控制器ctr2中没有,就会去父级ctr1中找,找到之后进行显示。当通过ng-model手动改变ctr1中的name值的时候,就会自动在ctr2中创建一个name变量

微信二维码