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 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 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
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
php实用代码片段整理
2016/11/12 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
python操作MongoDB基础知识
2013/11/01 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
python和shell获取文本内容的方法
2018/06/05 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
学生档案自我鉴定
2013/10/07 职场文书
财务主管岗位职责
2014/02/28 职场文书
银行进社区活动总结
2014/07/07 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书