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)的概览,并说明 ...

随机推荐

通过反射获取及调用方法(Method)
1.获取方法使用反射获取某一个类中的方法,步骤:①找到获取方法所在类的字节码对象②找到需要被获取的方法 Class类中常用方法: public Method[] getMethods():获取包括自身 ...
nginx 代理转发 wcf接口
前言以前对比过enginx和其他几个web服务器(IIS,Apache,lighttpd)的处理静态文件的能力,enginx是最好的,甚至超过其他的几倍. 虽说enginx官方声明在Windows上 ...
推荐几款基于Bootstrap的响应式后台管理模板
1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...
Oracle和SQL server查询数据库中表的创建和最后修改时间
有时候我们需要查看下数据数据库中表的创建时间和最后修改时间,可以通过以下语句实现: Oracle数据库 -- 查看当前用户下的表 SELECT * FROM USER_TABLES -- 查看数据库中 ...
springboot aop使用介绍
第一步:添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...
移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
vue-cli脚手架之其他文件解释
好了,脚手架目录中重要的文件基本都介绍了,但还有一个不太注意到的文件没有解释,这里也说明一下. config文件夹下的index.js,作用是不同开发环境下的参数配置(可选项很多,生产环境.开发环境. ...
Linux Centos7安装Oracle12c第二版本
环境: CentOS7@VMware12,分配资源:CPU:2颗,内存:4GB,硬盘空间:30GB Oracle12C企业版64位下载地址:http://www.oracle.com/technet ...
ArcEngnine中IHookHelper的用法
一.IHookHelper 主要在用在自定义类型于AE带的的ICommand或ITool等 1.实例化IHookHelper 对象:IHookHelper m_hookHelper = new Hoo ...
大规模WEB服务技术
CPU负载的扩展很简单,增加相同结构的服务器,通过负载均衡来分散. I/O负载的扩展很困难.要考虑局部性.

AngularJs学习笔记--Understanding the Model Component

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

随机推荐

热门专题