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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
js实现车辆管理系统
Aug 26 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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
jquery cookie插件代码类
2009/05/26 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
python生成指定尺寸缩略图的示例
2014/05/07 Python
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
基于python使用tibco ems代码实例
2019/12/20 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
keras topN显示,自编写代码案例
2020/07/03 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
weblogic面试题
2016/03/07 面试题
高校教师思想汇报
2014/01/11 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
数据设计之权限的实现
2022/08/05 MySQL