深入探究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"; });
结果:
改变表单中的值结果如下:
避免直接绑定变量给作用域属性,对象属性的双向数据绑定是最好的解决方案。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Apache solr(二).
- Git 使用技巧
- 4.训练模型之准备训练数据
- 关于dg broker的简单配置(r5笔记第99天)
- 三天速成 TensorFlow课件分享
- 干货 | 机器学习算法线上部署方法
- 用于快速开发 3D 数据处理软件的开源数据处理库 —— Open3D | Github 项目推荐
- 【java网络】IO编程
- 一周 Github Trending 热门项目,最全中华古诗词数据库 | Github 项目推荐
- 【线程池】线程池与工作队列
- 一个快速方便的图形化 Python 调试器 —— birdseye | Github 项目推荐
- 关于分区表的在线重定义(r5笔记第98天)
- 10个实用的但偏执的Java编程技术
- 看似诡异的tablespace online问题(r5笔记第95天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PDO::getAvailableDrivers讲解
- PDO::_construct讲解
- Yii2.0实现的批量更新及批量插入功能示例
- PDO::inTransaction讲解
- 小程序前后端交互使用JWT
- python文件操作seek()偏移量,读取指正到指定位置操作
- 使用OpenCV去除面积较小的连通域
- 使用vs code编辑调试php配置的方法
- Python OpenCV去除字母后面的杂线操作
- PDO::rollBack讲解
- PyTorch的torch.cat用法
- keras在构建LSTM模型时对变长序列的处理操作
- Discuz不使用插件实现简单的打赏功能
- Pytorch学习之torch用法—-比较操作(Comparison Ops)
- PHP里的$_GET数组介绍