AngularJs Understanding the Model Component


Posted in Javascript onSeptember 02, 2016

        在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 Model Component 的资料整理,后续继续补充,谢谢大家对本站的支持!

Javascript 相关文章推荐
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
Javascript中的arguments对象
Jun 20 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
使用FormData实现上传多个文件
Dec 04 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 #Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 #Javascript
js实现String.Fomat的实例代码
Sep 02 #Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 #Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 #Javascript
js实现StringBuffer的简单实例
Sep 02 #Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 #Javascript
You might like
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
Python常用列表数据结构小结
2014/08/06 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
python妹子图简单爬虫实例
2015/07/07 Python
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
python对html过滤处理的方法
2018/10/21 Python
python中eval与int的区别浅析
2019/08/11 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
某公司C#程序员面试题笔试题
2014/05/26 面试题
幼儿园教育教学反思
2014/01/31 职场文书
歌唱比赛主持词
2014/03/18 职场文书
安装工程师岗位职责
2015/02/13 职场文书
财务人员个人工作总结
2015/02/27 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
导游词之西安骊山
2019/12/03 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技