深入探索AngularJs的$scope对象(范围)

这两天学习了AngularJs的$scope对象，这是相当多的知识，很重要，所以今天加了一个小注释。

一.范围

AngularJs中的$scope对象是模板的域模型，也称为scope实例。通过为其属性赋值，可以将数据传递给模板进行呈现。

每个$Scope都是Scope类的一个实例，它有许多方法来控制作用域的生命周期，提供事件传播的功能，并支持模板的呈现。

AngularJs的每个应用程序都有一个$rootScope，它是所有其他作用域的父作用域。它的范围从包含ng-app指令的HTML元素开始。当新应用程序启动时，它会自动创建。

二、指令创建的范围

Ng-controller指令是一个范围创建指令。当在DOM树中遇到作用域创建指令时，AngularJs将创建一个新的作用域类$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=' world ctrl ' Li ng-repeat=' country in country ' { { country . name } }拥有{{country.population}}人口/Li hr世界人口：{{population}}/ul/body脚本类型=' text/JavaScript ' src=' http : js/angular . js '/script script src=' http : js-脚本类型=' text/JavaScript ' src=' http : js/angular js . js '/script-/html myapp . js

var app=angular.module('myApp '，[])；app.controller('WorldCtrl '，function($ scope){ $ scope . population=7000；$ scope . counters=[{ name : ' France '，population:63.1}，{name: 'UK '，population: 61.8}，]；br })；测试结果：

ng-repeat指令用于遍历属性值。对于每个国家，都有一个新的变量暴露给$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=' hello ctrl '向：问好input type=' text ' ng-model=' name ' h1 hello，{ { name } }！/h1 /div /body脚本类型=' text/JavaScript ' src=' http : js/angular . js '/脚本脚本类型=' text/JavaScript ' src=' http : js/controller . js '/脚本/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=' hello ctrl '向：输入类型=' text ' ng-model=' thing。名字叫‘h1你好，{ { thing。名称} }！/h1 /div /body脚本类型=' text/JAVAScript ' src=' http : js/angular。js /脚本脚本类型=' text/JavaScript ' src=' http : js/controller。js /脚本/html var app=angular。模块(' myApp '，[])app.controller('HelloCtrl '，函数($ scope){ $ scope。名称='友谊'；});结果：

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。