深入探究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扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
微信开发 微信授权详解
Oct 21 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 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 json_encode奇怪问题说明
2011/09/27 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
Python Socket编程入门教程
2014/07/11 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
Linux下python制作名片示例
2018/07/20 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
美国精油公司:Plant Therapy
2019/05/17 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
给分销商的致歉信
2014/01/14 职场文书
商场消防演习方案
2014/02/12 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
会计工作检讨书
2015/02/19 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
2015年售票员工作总结
2015/04/29 职场文书
运动会开幕式主持词
2015/07/01 职场文书
springboot入门 之profile设置方式
2022/04/04 Java/Android
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS