AngularJs之$scope对象（做用域）

时间 2019-11-17

原文原文链接

1、做用域javascript

AngularJs中的$scope对象是模板的域模型,也称为做用域实例.经过为其属性赋值,能够传递数据给模板渲染.html

每一个$scope都是Scope类的实例,Scope类有不少方法,用于控制做用域的生命周期、提供事件传播功能,以及支持模板的渲染等.java

AngularJs的每一个应用程序都有一个$rootScope,它是其余全部做用域的父做用域,它的做用范围从包含ng-app指令的HTML元素开始.它是在新应用启动时自动建立.angularjs

2、指令建立做用域app

ng-controller指令是做用域建立指令,当在DOM树中遇到做用域建立指令时,AngularJs都会建立Scope类的新实例$scope.新建立的做用域实例$scope会拥有$parent属性,并指向它的父做用域.在DOM树中,会有不少这样的指令建立出不少做用域.测试

(众多做用域造成了以$rootScope为根的树结构,鉴于DOM树驱动了做用域的建立,做用域树模仿了DOM树的结构)spa

ng-repeat指令的运用:3d

<!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.jshtm

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},
	];
});

测试结果：对象

ng-repeat指令用来遍历属性值,上面对应每一个country,都有个新变量要暴露给$scope,而又没有覆盖以前变量的值;AngularJs中给集合中的每一个元素都建立了新的做用域,因此在不一样做用域中,定义同名变量,不会形成命名的冲突(不一样的DOM元素指向不一样的做用域,并使用各自做用域中的变量渲染模板).这至关于集合中每一个项目都有本身的命名空间.

3、做用域层级和继承

做用域中定义的属性对于全部子做用域是可见的，只要子做用域中没有定义同名的属性.

实例：

<!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";
});

结果：

改变表单中的值结果以下：

避免直接绑定变量给做用域属性，对象属性的双向数据绑定是最好的解决方案。