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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
js实现无缝轮播图
Mar 09 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
基于canvasJS在PHP中制作动态图表
May 30 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
PHP使用递归生成文章树
2015/04/21 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
javascript 写类方式之五
2009/07/05 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
对python 读取线的shp文件实例详解
2018/12/22 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
中学生国旗下讲话稿
2014/04/26 职场文书
人事经理岗位职责
2014/04/28 职场文书
授权委托书
2014/07/31 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
教师批评与自我批评
2014/10/15 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
产品质量保证书范本
2015/02/27 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL