AngularJS学习笔记（三）数据双向绑定
双向绑定
双向绑定是AngularJS最实用的功能，它节省了大量的代码，使我们专注于数据和视图，不用浪费大量的代码在Dom监听、数据同步上，关于双向更新，可看下图：
下面，我们通过代码来实现。先不要纠结其中不明白的地方，先来体验下数据绑定的效果。
数据-->视图
这里我们只演示有了数据以后，如何绑定到视图上。
<!DOCTYPE html> <html ng-app="App">
<head>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
<script type="text/javascript"> var App = angular.module("App", []); App.controller("ctrl", function ($scope) { $scope.username='张三' $scope.changename=function(){
$scope.username='李四';
}
}); </script>
</head>
<body>
<div ng-controller ="ctrl">
<button class='btn btn-primary' ng-click='changename();'>
username='李四'
</button>
<!--页面加载初期，用户可能会看到绑定的表达式-->
<div>{{username}}</div>
<!--此绑定不会出现上述情况-->
<div ng-bind='username'></div>
</div>
</body>
</html>点击按钮之后，div内容变成 李四，效果如图：
点击这里查看效果。
视图—>数据
上个例子，我们看了数据变化后，视图也会自动变化。那么这个例子则是反过来，视图变化，导致数据也跟着变化，那么数据变化后，我们如何知道呢，这儿我们可以通过另外一个元素将数据再显示出来。
<!DOCTYPE html> <html ng-app="App">
<head>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
<script type="text/javascript"> var App = angular.module("App", []); App.controller("ctrl", function ($scope) { $scope.username='张三'
}); </script>
</head>
<body>
<div ng-controller ="ctrl">
<input type='text' ng-model='username' /> <div>{{username}}</div>
</div>
</body>
</html>查看效果：
点击这里查看效果。
实现机制
angular对常用的dom事件，xhr事件等做了封装， 在里面触发进入angular的digest流程。
在digest流程里面， 会从rootscope开始遍历， 检查所有的watcher。具体请参考https://github.com/xufei/Make-Your-Own-AngularJS/blob/master/01.md文章吧。
AngularJS学习笔记（三）数据双向绑定的更多相关文章
- Vue源码学习(一）———数据双向绑定 Observer
从最简单的案例,来学习Vue.js源码. <body> <div id='app'> <input type="text" v-model=" ...
- SpringMVC 学习笔记(三)数据的校验
34. 尚硅谷_佟刚_SpringMVC_数据绑定流程分析.avi 例如:在jsp中输入一个String字符串类型,需要转换成Date类型的流程如下 convertservice对传入的数据进行转换 ...
- angularjs学习笔记三——directive
AngularJS 通过被称为 指令 的新属性来扩展 HTML. 正如你所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性. HTML5 允许扩展的(自制的)属性,以 data- ...
- AngularJS学习笔记(三) 单页面webApp和路由(ng-route)
就我现在的认识,路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了.因为angular目前最重要的作用就是做单页面webApp,而路由这个东西是能做到页面跳转的关 ...
- 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- 我的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 ...
- 前端笔记之微信小程序（二）{{}}插值和MVVM模式&数据双向绑定&指令&API
一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...
- 数据双向绑定页面无反应（angularjs）
问题引入 使用 angularjs进行过一段时间的开发后,基本上都会遇到一个这样的坑:页面进行了双向数据绑定,控制层的数据也已经改变了,但是视图层的数据却没有改变. 其实造成这个问题的原因大致分为以下 ...
- Jquery实现数据双向绑定（赋值和取值），类似AngularJS
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
随机推荐
- Python基础语法-内置数据结构之列表
列表的一些特点: 列表是最常用的线性数据结构 list是一系列元素的有序组合 list是可变的 列表的操作, 增:append.extend.insert 删:clear.pop.remove 改:r ...
- javascript实现OOP编程
1.首先通过一个函数来实现JS的单继承.使用原型方式来实现继承 (function () { $.extend({ oop: { extend: function (child, father) { ...
- 知物由学 | 见招拆招，Android应用破解及防护秘籍
本文来自网易云社区. “知物由学”是网易云易盾打造的一个品牌栏目,词语出自汉·王充<论衡·实知>.人,能力有高下之分,学习才知道事物的道理,而后才有智慧,不去求问就不会知道.“知物由学”希 ...
- Java 泛型通配符
package com.waston; import java.util.*; public class Main { public static void main(String[] args) { ...
- CodeForces - 940C + CodeForces - 932B (两道比较好的模拟题)
940C链接:http://codeforces.com/problemset/problem/940/C C. Phone Numbers time limit per test 2 seconds ...
- Android实战源码--围住神经猫
最终效果: AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manif ...
- 多个JDK下TOMCAT运行设置
当OS中含有多个JDK版本时,设置TOMCAT下JAVA环境变量信息的办法: 1.在setclasspath.bat或者setclasspath.sh下设置 set JAVA_HOME=d:\java ...
- Swift5 语言指南(二十八) 高级运算符
除了Basic Operators中描述的运算符之外,Swift还提供了几个执行更复杂值操作的高级运算符.这些包括C和Objective-C中您熟悉的所有按位和位移运算符. 与C中的算术运算符不同,S ...
- 微信小程序报Cannot read property 'setData' of undefined的错误
最近在学习微信小程序的开发,让我吐槽的是,都9102年了,怎么还是有有时不能复制,有时不能打中文的bug呢,这个时候,你可以Ctrl+shift+w一下,如果还不行,那就得重启了.. 进入正题吧,刚在 ...
- 线性表java实现
顺序表 public class SequenceList { /* * content,节点内容 * location,节点在表中的位置(序号) * */ private String conten ...