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 相关文章推荐
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
整理一下常见的IE错误
Nov 18 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
亲自动手实现vue日历控件
Jun 26 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 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操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
DEFER怎么用?
2006/07/01 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
python如何调用字典的key
2020/05/25 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
奖学金感谢信
2015/01/21 职场文书
导游词开场白
2015/01/31 职场文书
迎新生晚会主持词
2015/06/30 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
python本地文件服务器实例教程
2021/05/02 Python
Vue的生命周期一起来看看
2022/02/24 Vue.js
MySQL七大JOIN的具体使用
2022/02/28 MySQL
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏