深入探究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下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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数组游标实现对数组的各种操作详解
2016/01/26 PHP
学习PHP session的传递方式
2016/06/15 PHP
PHP强制转化的形式整理
2020/05/22 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
windows下python安装小白入门教程
2018/09/18 Python
Python中is和==的区别详解
2018/11/15 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
python中round函数如何使用
2020/06/19 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
汽车维修专业自荐书
2014/05/26 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
我是特种兵观后感
2015/06/11 职场文书
从事会计工作年限证明
2015/06/23 职场文书
企业宣传语大全
2015/07/13 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS