深入探究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";

});

结果:

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

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

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

(0)

相关推荐

  • Angular.js之作用域scope'@','=','&'实例详解

    什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执行环境.作用域有层次结构,这个层次和相应的 DOM 几乎是一样的.作用域能监控表达式和传递事件. 在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层. 除了用 ng-app 指令可以产生一个作用域之外,其他的指令如 ng-controller,ng-repeat

  • AngularJs学习第五篇从Controller控制器谈谈$scope作用域

    Controller的创建 AngularJs controller使用无处不在,在里代码演示比较简单的创建工作. <!DOCTYPE html> <html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset

  • Angular.Js之Scope作用域的学习教程

    scope是什么? 大家都知道在AngularJS 中作用域是一个指向应用模型的对象,它是表达式的执行环境.作用域有层次结构,这个层次和相应的 DOM 几乎是一样的.作用域能监控表达式和传递事件. 在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层. 除了用 ng-app 指令可以产生一个作用域之外,其他的指令如 ng-controller,ng-

  • AngularJS入门教程之Scope(作用域)

    AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 如何使用 Scope 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: AngularJS 实例 控制器中的属性对应了视图上的属性: <!DOCTYPE html> <html> <head> <me

  • 关于angularJs指令的Scope(作用域)介绍

    每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. 1.scope = false JS 代码: html 代码: result: 修改文本框的内容,两个名字都会变,实际上修改的是同一个$scope的name属性. 2. scope=true

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

    这两天学习了AngularJs之$scope对象这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.作用域 AngularJs中的$scope对象是模板的域模型,也称为作用域实例.通过为其属性赋值,可以传递数据给模板渲染. 每个$scope都是Scope类的实例,Scope类有很多方法,用于控制作用域的生命周期.提供事件传播功能,以及支持模板的渲染等. AngularJs的每个应用程序都有一个$rootScope,它是其他所有作用域的父作用域,它的作用范围从包含ng-app指令的H

  • 深入探究AngularJS框架中Scope对象的超级教程

    一.遇到的问题 问题发生在使用 AngularJS 嵌套 Controller 的时候.因为每个 Controller 都有它对应的 Scope(相当于作用域.控制范围),所以 Controller 的嵌套,也就意味着 Scope 的嵌套.这个时候如果两个 Scope 内都有同名的 Model 会发生什么呢?从子 Scope 怎样更新父 Scope 里的 Model 呢? 这个问题很典型,比方说当前页面是一个产品列表,那么就需要定义一个 ProductListController functio

  • 详解JavaScript的AngularJS框架中的作用域与数据绑定

    AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与同为 MVC 框架的 Dojo 的定位不同,AngularJS 在功能上更加轻量,而相比于 jQuery,AngularJS 又帮您省去了许多机械的绑定工作.在一些对开发速度要求高,功能模块不需要太丰富的非企业级 WEB 应用上,AngularJS 是一个非常好的选择.AngularJS 最为复杂同

  • AngularJS中scope的绑定策略实例分析

    本文实例讲述了AngularJS中scope的绑定策略.分享给大家供大家参考,具体如下: 当scope选项写为scope:{ }这种形式的时候,就已经为指令生成了隔离作用域,指令的模板就无法访问外部作用域了: 具有隔离作用域的指令最主要的使用场景是创建可复用的组件,组件可以在未知上下文中使用,并且可以避免污染所处的外部作用域或不经意地污染内部作用域. 现在,我们来看看绑定策略的三种形式: @.= .&. 1. @ 本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定.指令内部作用域可以

  • AngularJS全局scope与Isolate scope通信用法示例

    本文实例讲述了AngularJS全局scope与Isolate scope通信用法.分享给大家供大家参考,具体如下: 在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地scope的使用做一个总结. 一.scope作用域 1.AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在dire

  • 详解angularjs中的隔离作用域理解以及绑定策略

    我们首先看下面的例子: <!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel

  • 浅谈angularjs module返回对象的坑(推荐)

    通过将module中不同的部件拆分到不同的js文件中,在组装的时候发现module存在一个奇怪的问题,不知道是不是AngularJS的bug.至今没有找到解释. 问题是这样的,按照理解,angular.module('app.main', []);这样一句话相当于从app.main命名空间返回出一个app对象.那么,不论在任何js文件中,我通过该方法获得的app变量所储存的指针都应该指向唯一的一个堆内存,而这个内存中存储的就是这个app对象.这种操作在module的js文件,和controlle

  • AngularJS equal比较对象实例详解

    使用情况 1 首先,所有满足 a === 3 这种的对象,在angular.equals(a,b)中都会返回真 2 所有对象的类型,以及属性值都相同的,也会返回真 3 NaN和NaN也会返回真(在javascript中,返回的是假) 4 正则也会返回真(在javascirpt,/abc/ /abc/被认为是不相等的) 样例 <html> <head> <meta http-equiv="Content-Type" content="text/ht

  • angularJS 中$scope方法使用指南

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script src="http://localhost:81/js/jquery.js"> </script> <script src="http://lo

  • angularJs中$scope数据序列化的实例

    如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> <script src="jquery.min.js"></script> </head> <bod

随机推荐