深入探究AngularJs之$scope对象（作用域）
这两天学习了AngularJs之$scope对象这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。
一、作用域
AngularJs中的$scope对象是模板的域模型,也称为作用域实例.通过为其属性赋值,可以传递数据给模板渲染.
每个$scope都是Scope类的实例,Scope类有很多方法,用于控制作用域的生命周期、提供事件传播功能,以及支持模板的渲染等.
AngularJs的每个应用程序都有一个$rootScope,它是其他所有作用域的父作用域,它的作用范围从包含ng-app指令的HTML元素开始.它是在新应用启动时自动创建.
二、指令创建作用域
ng-controller指令是作用域创建指令,当在DOM树中遇到作用域创建指令时,AngularJs都会创建Scope类的新实例$scope.新创建的作用域实例$scope会拥有$parent属性,并指向它的父作用域.在DOM树中,会有很多这样的指令创建出很多作用域.
(众多作用域形成了以$rootScope为根的树结构,鉴于DOM树驱动了作用域的创建,作用域树模仿了DOM树的结构)
ng-repeat指令的运用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body >
<ul ng-app="myApp" ng-controller="WorldCtrl">
<li ng-repeat="country in countries">
{{country.name}} 有 {{country.population}} 人口
</li>
<hr>
世界人口数：{{population}}
</ul>
</body>
<script type="text/javascript" src="js/angular.js" ></script>
<script src="js/myapp.js"></script>
<!--<script type="text/javascript" src="js/angularjs.js" ></script>-->
</html>
myapp.js
var app = angular.module("myApp",[]);
app.controller('WorldCtrl',function($scope){
$scope.population = 7000;
$scope.countries = [
{name: 'France',population:63.1},
{name: 'UK',population: 61.8},
];<br>});
测试结果：
ng-repeat指令用来遍历属性值,上面对应每个country,都有个新变量要暴露给$scope,而又没有覆盖之前变量的值;AngularJs中给集合中的每个元素都创建了新的作用域,所以在不同作用域中,定义同名变量,不会造成命名的冲突(不同的DOM元素指向不同的作用域,并使用各自作用域中的变量渲染模板).这相当于集合中每个项目都有自己的命名空间.
三、作用域层级和继承
作用域中定义的属性对于所有子作用域是可见的，只要子作用域中没有定义同名的属性.
实例：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-init="name='world'">
<h1>Hello,{{name}}</h1>
<div ng-controller="HelloCtrl">
Say hello to:<input type="text" ng-model="name">
<h1>Hello,{{name}}!!</h1>
</div>
</body>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/controller.js" ></script>
</html>
controller.js
var app = angular.module("myApp",[])
app.controller("HelloCtrl", function($scope) {
// $scope.name = "youyi";
});
结果：
在父作用域中定义了变量，子作用域中暂时未定义同名变量,可以看到在父作用域中定义的变量在整个应用程序中到处可见.
如果子作用域中有同名属性：
AngularJs中的作用域继承和JavaScript中的原型继承遵循同样的规则（沿着继承树向上查找属性，直至找到为止）。
改变子作用域中的变量值，不会对负作用域中的同名变量产生影响。
通过下面的方式可以让子作用域中影响定义在父作用域中的属性：
但是这种方式是不可靠的，问题在于ng-model指令所用的表达式对DOM结构做了武断的假设,尽量避免使用$parent。
更好的解决方案：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-init="thing={name:'world'}">
<h1>Hello,{{thing.name}}</h1>
<div ng-controller="HelloCtrl">
Say hello to:<input type="text" ng-model="thing.name">
<h1>Hello,{{thing.name}}!!</h1>
</div>
</body>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/controller.js" ></script>
</html>
var app = angular.module("myApp",[])
app.controller("HelloCtrl", function($scope) {
$scope.name = "youyi";
});
结果：
改变表单中的值结果如下：
避免直接绑定变量给作用域属性，对象属性的双向数据绑定是最好的解决方案。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
ng-container 是 Angular 2+ 中可用的一个元素,可以作为结构指令的宿主,在本文中,您将探讨可以使用 ng-container 解决的场景,文中有相关的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下2024-02-02
前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。下面这篇文章主要给大家介绍了AngularJS中run方法的巧妙运用,需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
这篇文章主要介绍了AngularJS ng-style中使用filter的相关资料,需要的朋友可以参考下2016-09-09
今天小编就为大家分享一篇Angular服务Request异步请求的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
简介可以自动完成UI的AngularJS工具angular-smarty
这篇文章主要介绍了简介可以自动完成UI的AngularJS工具angular-smarty,包括其中隔离作用域绑定指令符和promise的使用,需要的朋友可以参考下2015-06-06
今天小编就为大家分享一篇angularJs在多个控制器中共享服务数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
下面小编就为大家带来一篇浅谈AngularJS中ng-class的使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要介绍了详解为生产环境编译Angular2应用的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本文主要介绍AngularJS ng-copy 指令,这里帮大家整理了ng-copy指令的基础资料,并附有示例代码和效果图,有需要的朋友参考下2016-08-08
这篇文章主要介绍了angular1配合gulp和bower使用教程，本文给大家介绍的非常详细，具有参考借鉴价值,需要的朋友可以参考下2018-01-01
最新评论