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

随机推荐

Dictionary<string, object>不区分大小写
Dictionary<string, object> dic = new Dictionary<string, object>(StringComparer.OrdinalIg ...
一站式机器学习平台TI-ONE是什么？——云+未来峰会开发者专场回顾
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 背景:5月23-24日,以“焕启”为主题的腾讯“云+未来”峰会在广州召开,广东省各级政府机构领导.海内外业内学术专家.行业大咖及技术大牛等在 ...
Linux 命令 -- chmod
chmod命令用来变更文件或目录的权限.在UNIX系统家族里,文件或目录权限的控制分别以读取.写入.执行3种一般权限来区分,另有3种特殊权限可供运用.用户可以使用chmod指令去变更文件与目录的权限, ...
Python基础(3) - 数据类型:3列表类型
Python 列表是序列对象,可包含任意的Python数据信息,如字符串.数字.列表.元组等.列表的数据是可变的,我们可通过对象方法对列表中的数据进行增加.修改.删除等操作.列表用[]包括起来的. 列 ...
[android] 天气app布局练习（三）
主要练习LinearLayout和layout_weight属性 <RelativeLayout xmlns:android="http://schemas.android.com/a ...
[PHP] Oauth授权和本地加密
1.Oauth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方关键字:appKey appSecre ...
Struts2 学习（一）
一.Struts 介绍 1.Struts2的概述 1.早期开发模型Servlet+JSP+JavaBean(Model2)显得力不从心: 流程凌乱.数据传递无序.缺乏辅助功能. 2.MVC模式的轻量级 ...
mysql数据库详解
001 数据库应用系统设计 1.规划 2.需求分析 3.概念模型设计 4.逻辑设计 5.物理设计 6.程序编制及调试 7.运行及维护. 002 创建数据库 CREATE DAT ...
sqlserver查询表字段描述（转）
原文地址:https://blog.csdn.net/changhong009/article/details/29587063 --快速查看表结构(比较全面的) SELECT CASE WHEN c ...
jQuery Text-to-Speech 谷歌在线语音
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" ...

AngularJs学习笔记--Understanding the Model Component

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

随机推荐

热门专题