深入探究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 相关文章推荐
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
通过命令行创建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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
收藏的一个php小偷的核心程序
2007/04/09 PHP
php多文件上传下载示例分享
2014/02/20 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
Python 自动刷博客浏览量实例代码
2017/06/14 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
python selenium操作cookie的实现
2020/03/18 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
python软件都是免费的吗
2020/06/18 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
KTV的创业计划书范文
2014/02/02 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
2014年公务员工作总结
2014/11/18 职场文书
化工厂员工工作总结
2015/10/15 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL