angularjs scope(作用域)

本文详细介绍了AngularJS中的作用域(scope)概念,包括其作为HTML和JavaScript间的纽带作用,以及如何在控制器中使用作用域对象($scope)。还探讨了根作用域($rootScope)的概念及其在多个控制器间的共享特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是angularjs作用域:
1、scope(作用域)是应用在html(视图)和javascript(控制器)之间的纽带
2、scope是一个对象,有可用的方法和属性。
3、scope可应用在视图和控制器上。
怎么使用scope
我们在创建了控制器后,可以将$scope对象当作一个参数来传递:
例如:
<div ng-app="myApp" ng-controller="myCtrl"></div>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
// 执行函数
});
</script>

在上面的代码中,我们创建了myCtrl控制器,并将$scope对象当做参数传递给了函数.
实例:
<div ng-app="myApp">
	<div ng-controller="myCtrl">
		{{name}}
	</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
	$scope.name = "zhang";
});
</script>
上面的代码是一个简单的$scope作用域的实例,其实我们应该能够看出来,$scope可以设置html控制器中的任何变量,并为其赋值,最终结果绑定在了html视图层.
注意:
其实scope是一个大的概念,scope是mvc组成下的产物,也就是view(视图)即html、model(模型)当前视图中可用的数据、controller(控制器)即javascript函数,可以添加或修改属性。
例如:
<div ng-app="myApp">
	<div ng-controller="myCtrl">
		<input type="text" ng-model="name">
		<p>{{myInfo}}</p>
		<button ng-click="myFunc()">点击</button>
	</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",["$scope",myCtrl]);
function myCtrl($scope){
	$scope.name = "zhang";
	$scope.myFunc = function(){
		$scope.myInfo = "你好" + $scope.name +"!";
	}
}
</script>
运行上面的代码结果如下图所示:

注意这是初始化运行后执行了一次点击事件后看到的效果,当我们修改输入框中的值时,再次点击你会发现下面的值变为你好+新的值。
根作用域
所有的应用都会有一个$rootScope,它可以作用在ng-app指令包含的所有html元素中。$rootScope可用于整个应用中,是各个controller中scope的桥梁,用于scope的桥梁,用rootScope定义的值,可以在各个controller中使用。
例如:
<div ng-app="myApp">
	<div ng-controller="myCtrl_1">
		{{one + " " + two + " " + three + " " + four}}
	</div>
	<div ng-controller="myCtrl_2">
		{{one + " " + two + " " + three + " " + four}}
	</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl_1",function($scope,$rootScope){
	$scope.one = 1;
	$rootScope.two = "全局1";
	console.log($rootScope.four);
});
app.controller("myCtrl_2",function($scope,$rootScope){
	$scope.three = 2;
	$rootScope.four = "全局2";
	console.log($rootScope.two);
});
</script>

其实$rootScopt就是一个全局对象,我们在控制器层,也就是js中设置的$rootScopt跟作用域,很明显在视图层,也就是在html中都能够访问到,但是在控制器1也就是myCtrl_1中通过 console.log($rootScope.four);方式来打印出myCtrl_2里面的 $rootScope.four = "全局2";的值却是"undefined"也就是说在myCtrl_1控制器中并没有找到变量four的值,但是 console.log($rootScope.two);却是可以将two的值打印出来,这也就说明了浏览器解析angularjs的规则,跟解析原生javascript是一样的,从上往下解析执行脚本,由于没有存在预解析,或变量提升的状况,所以 console.log($rootScope.four);执行的结果只能为undefined.
总结:
$scope:
对于$scope它的作用域就是视图层中对应的控制器部分,为什么是对应的控制器,因为在实际项目中为了满足开发者的需求我们需要创建的controller控制器不仅仅只有一个,这时我们必须要清楚此时的$scope对应的是哪个控制器。
$rootScope:
是属于全局作用域,对于这个根作用域我们需要注意两点。
1、在视图层中我们可以在任何地方去调用它设置的属性值,没有不同控制器的限制。
2、在js中我们不能忽视浏览器解析js脚本的规则来向下调用变量,这样会输出undefined,但是由下向上访问是可以的。

扩展:
1、this的指向
1、总是指向函数的直接调用者。
2、如果有new实例化对象,那么this就指向这个new出来的实例化对象。
3、如果是在事件中的话,那么this将指向触发该事件的那个对象。
其实从某种意义上来理解$scope,它与this是有着相同性的。
(如果想了解更多关于this与面向对象的内容,可查阅我的博文 javascript之基础部分、javascript之面向对象编程 中的相关类容)
2、变量提升,预解析(如果想深入了解变量提升以及预解析的内容可以查阅我的博文 javascript预解析 )。
3、什么是undefined,以及什么情况下会输出undefined?
什么是undefined?
undefined是一个表示“无”的原始值,它与null不同,null是“无”的对象,当我们将null转化成数值时,null的值为“0”,但是undefined转换成数值的时候是“NaN”意思就是说不是数值。简单的理解就是undefined表示“无”的时候就是“无”就是不存在的意思,什么都没有。
那么都在什么情况下会出现undefined呢?
我们在开发的过程中时常会出现undefined,大致有以下几种情况会出现undefined。
1、当我们创建了变量,但是没有为其赋值的时候,如果调用这个变量就会出现undefined。
2、当调用函数时,应该提供的参数我们没有提供,这时候该参数就是undefined。
3、对象没有赋值属性,该属性的值为undefined。
4、当我们构造了函数但是却没有返回值的时候,这时默认返回的就是undefined。
如有理解不当之处,欢迎各位老铁留言指正。谢谢!!!!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值