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

随机推荐

用.net 2.0(或.net 3.5)开发的程序在.net 4.0的环境中运行的解决方案
引用:.NET2.0程序集无法在.net 4.0 中运行的解决方案 1. 原来是在.net 2.0 (VS2008)的环境下的程序,通过升级到.net 4.0 (VS2013)导致程序运行不了提示需 ...
bzoj 5315: [Jsoi2018]防御网络
Description Solution 考虑每一条边的贡献对于树边,如果两边各存在一个点,那么有贡献,总贡献就是 \((2^{size}-1)*(2^{n-size}-1)\) 分别对应两边的 \ ...
.netCore2.0 部分视图ViewComponent
.netCore 中部分视图相当于轻量级的控制器,建立方法类似控制器,需要建立文件夹Components,然后再建立视图组件控制器,规则和视图控制器类似,默认结尾为ViewComponent,如Abc ...
C#继承中构造函数,成员变量的执行顺序
public class Animal { static string baseClassName; protected string _skincolor; Instancevariable iv ...
.net IoC 之 Spring.Net 适合刚开始使用
Spring.Net包括控制反转(IoC) 和面向切面(AOP),这篇文章主要说下IoC方面的入门. 一.首先建立一个MVC项目名称叫SpringDemo,然后用NuGet下载spring(我用的是S ...
Web开发：Bootstrap的应用
javaweb之jsp标签
1.JSP标签简介 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 2.JSP常用标签 ...
Java并发—–深入分析synchronized的实现原理
记得刚刚开始学习Java的时候,一遇到多线程情况就是synchronized,相对于当时的我们来说synchronized是这么的神奇而又强大,那个时候我们赋予它一个名字“同步”,也成为了我们解决多线 ...
Ascii码 unicode码 utf-8编码 gbk编码的区别
ASCII码: 只包含英文,数字,特殊符号的编码,一个字符用8位(bit)1字节(byte)表示 Unicode码: 又称万国码,包含全世界所有的文字,符号,一个字符用32位(bit)4字节(byte ...
CSS 盒子模型及 float 和 position
## CSS和模型 ##CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,包括外边距(marign),边框(border),填充(padding),内容物(content) 盒子模型的类型: ...

AngularJs学习笔记--Understanding the Model Component

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

随机推荐

热门专题