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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
一个可复用的vue分页组件
May 15 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
Ajax实现三级联动效果
Oct 05 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
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
小学雷锋月活动总结
2014/07/03 职场文书
土地租赁意向书
2014/07/30 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
安全先进班组材料
2014/12/26 职场文书
人事主管岗位职责
2015/02/04 职场文书
2015年信访工作总结
2015/04/07 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
Redis如何一键部署脚本
2021/04/12 Redis