AngularJs学习笔记--Understanding the Model Component

原版地址：http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model

　　在angular文档讨论的上下文中，术语“model”可以适用于单一对象代表一个实体（例如，一个叫” phones”的model，它的值是一个电话数组。）或者作为应用的全部数据Model（所有实体）。

　　在angular中，model可以是任意数据，可以通过angular的scope对象的属性来获取model。属性的名称是model的标识，值可以是任意javascript对象（包括数组和原始数据）。

　　javascript想成为model的唯一的条件是对象必须作为一个scope对象的属性被angular scope引用。属性的引用关系可以明确或者隐含地创建。

　　我们可以通过以下几种方式来显式创建scope的属性，关联javascript对象来创建model：

在javascript代码中，直接赋值给scope对象的属性；这通常发出现在controller中：

function MyCtrl($scope) {

     // create property 'foo' on the MyCtrl's scope

     // and assign it an initial value 'bar'

     $scope.foo = 'bar';

 }

在模版的angular表达式（http://www.cnblogs.com/lcllao/archive/2012/09/16/2687162.html）中，使用赋值操作符：

<button ng-click="{{foos='ball'}}">Click me</button>

在模版中使用ngInit directive（http://docs.angularjs.org/api/ng.directive:ngInit）（仅仅作为例子，不推荐在真实应用中使用）

<body ng-init=" foo = 'bar' ">

　　angular在下面的模版结构中会隐式创建model：

表单的input 、select、textarea和其他form元素：

<input ng-model="query" value="fluffy cloud">

　　上面的代码，在当前的scope中创建了一个叫”query”的model，并且与input的value值绑定，初始化为”fluffy cloud”。

在ngRepeater中声明迭代器

<p ng-repeat="phone in phones"></p>

　　上面的代码为每一个phones数组的元素各自创建了一个child scope，并且在对应的child scope中创建”phone”model，赋予数组中对应的值。

　　在angular中，当出现下面的情况时，javascript对象将不再是一个model：

当没有angular scope包含与该对象关联的属性时。
所有包含与对象关联的属性的angular scope成为了陈旧和适合垃圾回收时。

　　下面的插图展示了在一个简单的模版中隐式创建一个简单的数据model。

AngularJs学习笔记--Understanding the Model Component的更多相关文章

AngularJs学习笔记--Understanding the Controller Component
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javasc ...
AngularJs学习笔记--Understanding Angular Templates
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...
AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括本文主要是angular组件(components)的概览,并说明 ...

随机推荐

poj 2954 Triangle
pick公式+gcd公式 #include<iostream> #include<map> #include<string> #include<cstring ...
移动前端 HTML5 head
移动前端不得不了解的HTML5 head 头标签(2016最新版) 发表于 2016年10月20日 by 愚人码头被浏览 875 次小编推荐:掘金是一个高质量的技术社区,从 ECMAScript ...
java并发编程（3）避免活跃性危险
活跃性危险一.死锁发生:每个人都不愿意放弃自己的锁,确想要别人的锁,这就会导致死锁 1.锁顺序死锁:如果每个线程以固定的顺序获取锁,那么至少在程序中不会出现锁顺序导致的死锁: 因为顺序固定如:所 ...
java--线程状态【转】
1.新建状态 Thread t1 = new Thread(); 创建之后,就已经有了相应的内存和其他资源,但是还是处于不可运行状态. 2.就绪状态当一个线程使用.start()启动之后就处于就绪状 ...
架构实战项目心得（十四）：spring-boot结合Swagger2构建RESTful API测试体系
一.添加依赖: <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-s ...
springmvc + spring + ibatis + mysql
1.spring mvc 官网下载:https://repo.spring.io/webapp/#/artifacts/browse/simple/General/libs-release-local ...
很多个java面试题
1. 为什么说Java是一门平台无关语言? 平台无关实际的含义是“一次编写到处运行”.Java 能够做到是因为它的字节码(byte code)可以运行在任何操作系统上,与底层系统无关. 2. 为什么 ...
3、springboot之热部署
我用的是idea 一.开启idea自动make功能 1.CTRL + SHIFT + A --> 查找make project automatically --> 选中 2.CTRL + ...
JavaScript里面的居民们2-字符串
基于HTML,实现需求按照HTML中按钮的描述以此实现功能计算结果显示在 id 为 result 的 P 标签中 <!DOCTYPE html> <html> <he ...
1023 GPA计算
1023 GPA计算时间限制: 1 s 空间限制: 128000 KB 题目等级 : 青铜 Bronze 题解查看运行结果题目描述 Description 小松终于步入了大学的殿 ...

AngularJs学习笔记--Understanding the Model Component

AngularJs学习笔记--Understanding the Model Component的更多相关文章

随机推荐

热门专题