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 相关文章推荐
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
对node.js中render和send的用法详解
May 14 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
微信小程序实现打卡签到页面
Sep 21 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
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
解析strtr函数的效率问题
2013/06/26 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
详解Python验证码识别
2016/01/25 Python
python实现实时监控文件的方法
2016/08/26 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
python逆向入门教程
2018/01/15 Python
python ddt实现数据驱动
2018/03/14 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Keras自定义IOU方式
2020/06/10 Python
Django REST 异常处理详解
2020/07/15 Python
python中最小二乘法详细讲解
2021/02/19 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
社区网格化管理实施方案
2014/03/21 职场文书
实习协议书
2015/01/27 职场文书
2015年党风建设工作总结
2015/04/29 职场文书