深入探究AngularJs之$scope对象(作用域)


Posted in Javascript onJuly 20, 2017

这两天学习了AngularJs之$scope对象这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

一、作用域

AngularJs中的$scope对象是模板的域模型,也称为作用域实例.通过为其属性赋值,可以传递数据给模板渲染.

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

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

深入探究AngularJs之$scope对象(作用域) 

二、指令创建作用域

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

测试结果:

深入探究AngularJs之$scope对象(作用域)

 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之$scope对象(作用域)

在父作用域中定义了变量,子作用域中暂时未定义同名变量,可以看到在父作用域中定义的变量在整个应用程序中到处可见.

如果子作用域中有同名属性:

深入探究AngularJs之$scope对象(作用域)

深入探究AngularJs之$scope对象(作用域)

AngularJs中的作用域继承和JavaScript中的原型继承遵循同样的规则(沿着继承树向上查找属性,直至找到为止)。

改变子作用域中的变量值,不会对负作用域中的同名变量产生影响。

深入探究AngularJs之$scope对象(作用域)

通过下面的方式可以让子作用域中影响定义在父作用域中的属性:

但是这种方式是不可靠的,问题在于ng-model指令所用的表达式对DOM结构做了武断的假设,尽量避免使用$parent。

 深入探究AngularJs之$scope对象(作用域)

深入探究AngularJs之$scope对象(作用域)

更好的解决方案:

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

});

结果:

深入探究AngularJs之$scope对象(作用域)

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

 深入探究AngularJs之$scope对象(作用域)

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS之小练习代码
Oct 12 Javascript
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
js 函数的副作用分析
Aug 23 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
通过命令行创建vue项目的方法
Jul 20 #Javascript
基于BootStrap实现简洁注册界面
Jul 20 #Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 #Javascript
深入探究node之Transform
Jul 20 #Javascript
微信小程序“摇一摇”的实例代码
Jul 20 #Javascript
基于JavaScript实现微信抢红包功能
Jul 20 #Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 #Javascript
You might like
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
python格式化字符串实例总结
2014/09/28 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
pyhton列表转换为数组的实例
2018/04/04 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
django下创建多个app并设置urls方法
2020/08/02 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
交通安全演讲稿
2014/01/07 职场文书
优秀教师主要事迹
2014/02/01 职场文书
超市重阳节活动方案
2014/02/10 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
element多个表单校验的实现
2021/05/27 Javascript
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS