angular 数据双向绑定的终极奥义

1、ng-app: 是ng的入口,表示当前元素的所有指令都会被angular管理,让anguar认识这段代码,告诉angular要去管理下面的代码;同时angular执行这段代码的时候会在内部开辟一块空间来存储这个页面用到的数据模型。
2、ng-init: angular执行这个指令的时候,首先会在开辟的空间里面找有没有name这个数据模型,如果没有会主动创建一个数据模型,同时会给该数据模型赋值。
3、ng-model: angular执行这个指令的时候,首先会在创建的空间里面找name数据模型,发现有则与之主动建立一种联系(同步)。
4、{{name}}: 是一种表达式angular发现该表达式的名字name在数据模型里面存在,会主动与之建立一种联系(同步)。
综上当数据模型里面的值开始变化是,与之有联系(同步)的都会随之变化。
结果图如下:

angular 数据双向绑定的终极奥义的更多相关文章
- Angular数据双向绑定
Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...
- 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框
先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽 ...
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...
- 我的angularjs源码学习之旅3——脏检测与数据双向绑定
前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
- vuejs数据双向绑定原理(get & set)
前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...
- 原生js实现数据双向绑定
最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...
- 数据双向绑定页面无反应(angularjs)
问题引入 使用 angularjs进行过一段时间的开发后,基本上都会遇到一个这样的坑:页面进行了双向数据绑定,控制层的数据也已经改变了,但是视图层的数据却没有改变. 其实造成这个问题的原因大致分为以下 ...
- Vue数据双向绑定探究
前面的啰嗦话,写一点吧,或许就有点用呢 使用过vue的小伙伴都会感觉,哇,这个框架对开发者这么友好,简直都要笑出声了. 确实,使用过vue的框架做开发的人都会感觉到,以前写一大堆操作dom,bom的东 ...
随机推荐
- Exp1 PC平台逆向破解
本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShell,会返 ...
- Springboot-async(异步)初识
通过@Async注解实现一个简单的异步任务处理 首先,假设一个全自动化的工厂车间每天需要开启四台互不影响的机器开关来完成生产量,于是车间主任A委派“同步甲”和“异步乙”轮 流完成每天打开机器开关的任务 ...
- socket(TCP)通讯之Python实现
1.Service address = ('localhost', 9102) # AF_INET = ipv4; SOCK_STREAM:TCP s = socket.socket(socket.A ...
- vue开发常用配置
// src/main.js function setHtmlFontSize() { const baseSize = 100 // 由于浏览器字体最小为12px,故这个值要设置大一点,保证计算所得 ...
- 爬虫框架Scrapy 之(四) --- scrapy运行原理(管道)
解析后返回可迭代对象 这个对象返回以后就会被爬虫重新接收,然后进行迭代 通过scrapy crawl budejie -o xx.josn/xx.xml/xx.csv 将迭代数据输出到json.xml ...
- 2018-2019 ICPC, NEERC, Southern Subregional Contest (Online Mirror, ACM-ICPC Rules, Teams Preferred)
A. Find a Number 找到一个树,可以被d整除,且数字和为s 记忆化搜索 static class S{ int mod,s; String str; public S(int mod, ...
- 20155324《网络对抗技术》web安全基础实践
20155324<网络对抗技术>web安全基础实践 实验内容 使用webgoat进行XSS攻击.CSRF攻击.SQL注入 实验问答 SQL注入攻击原理,如何防御 ①SQL注入攻击是攻击者在 ...
- ‘Host’ is not allowed to connect to this mysql server
‘Host’ is not allowed to connect to this mysql server mysql 数据库不允许远程连接 方法一:修改 host 表 进入mysql数据库,选择m ...
- app接口中Http请求头示例
POST /v5/simProduct/getProductDetails HTTP/1.1 Accept:image/jsonHost: netroam.mihome.xiaomi.netUser- ...
- TV TimeShift和PVR的区别
Timeshift是在PVR菜单下,PVR菜单下一般有两个功能一个是刻录功能,一个是Timeshift功能,这两个功能都需要u盘或者内存卡的支持,刻录时把当前的节目刻录进优盘想看的时候还可以打开看,T ...