双向绑定

双向绑定是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学习笔记（三）数据双向绑定的更多相关文章

  1. Vue源码学习(一）———数据双向绑定 Observer

    从最简单的案例,来学习Vue.js源码. <body> <div id='app'> <input type="text" v-model=" ...

  2. SpringMVC 学习笔记(三)数据的校验

    34. 尚硅谷_佟刚_SpringMVC_数据绑定流程分析.avi 例如:在jsp中输入一个String字符串类型,需要转换成Date类型的流程如下 convertservice对传入的数据进行转换 ...

  3. angularjs学习笔记三——directive

    AngularJS 通过被称为 指令 的新属性来扩展 HTML. 正如你所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性. HTML5 允许扩展的(自制的)属性,以 data- ...

  4. AngularJS学习笔记(三) 单页面webApp和路由(ng-route)

    就我现在的认识,路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了.因为angular目前最重要的作用就是做单页面webApp,而路由这个东西是能做到页面跳转的关 ...

  5. 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  6. 我的angularjs源码学习之旅3——脏检测与数据双向绑定

    前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...

  7. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  8. 前端笔记之微信小程序（二）{{}}插值和MVVM模式&数据双向绑定&指令&API

    一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...

  9. 数据双向绑定页面无反应（angularjs）

    问题引入 使用 angularjs进行过一段时间的开发后,基本上都会遇到一个这样的坑:页面进行了双向数据绑定,控制层的数据也已经改变了,但是视图层的数据却没有改变. 其实造成这个问题的原因大致分为以下 ...

  10. Jquery实现数据双向绑定（赋值和取值），类似AngularJS

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

随机推荐

  1. Network in Network 2

    <Network in Network>论文笔记 1.综述 这篇文章有两个很重要的观点: 1×1卷积的使用 文中提出使用mlpconv网络层替代传统的convolution层.mlp层实际 ...

  2. jenkins构建时报错

    配置好项目后,选择立即构建,报错 由于节点管理配置的太低,或者在节点的用法上 选择了不同的方式 解决办法: 1.尽可能的使用这个节点 2.保证配置过程没有错误.

  3. asp.net core mvc 中间件之路由

    asp.net core mvc 中间件之路由 路由中间件 首先看路由中间件的源码 先用httpContext实例化一个路由上下文,然后把中间件接收到的路由添加到路由上下文的路由集合 然后把路由上下文 ...

  4. Microsoft.Office.Interop.Excel.ApplicationClass can not embedded 的问题

    用c#进行开发时,要做一个excel导入功能,期间使用到Microsoft.Office.Interop.Excel程序集,在用vs2008开发的时候没有报错,将这个程序集引用到vs2010的时候,便 ...

  5. 第二节：创建模型，使用Code First，配置映射关系

    这一节,实现模型的创建,配置映射关系 使用Code First数据迁移. 创建模型 一,首先创建几个接口:实体接口,聚合根接口,值对象接口 1,实体接口: 2,聚合根接口: 3,值对象接口: 二,模型 ...

  6. unity2D 船只型物体驱动的实现

    船只向前行驶的驱动力 假设在水中没有摩擦阻力,船只有惯性,船只可以转弯,按下前进键时船只会在力的作用下使得自身的物理运动方向变化到自身的前方方向,从而向前行进. 上图中 V:船当前物理速度 V1,V2 ...

  7. 创建窗口句柄时出错(error creating window handle)

    创建窗口句柄错误.这个错误非常头疼,难以排查,我从网络上搜集了一些排查方案. 可能的原因: 窗口句柄泄露,句柄数超过1W. 用户对象超过1W,错误提示"当前程序已使用了 Window 管理器 ...

  8. winform自动升级方案

    未涉及过winform升级,研究一阵,大致出来个不成熟的方案. 我的解决方案(判断升级,升级程序下载安装包的压缩包,解压,自动安装,重新启动程序). 1.首先根据服务器中软件版本号和本地软件版本号是否 ...

  9. flask框架~简易编写

    flaks框架: 先导报 from flask import Flask 重定向模块:redirect url_for是简易寻址跳转 jsonify强转为json格式 建立flask对象:app = ...

  10. IQueryable与IEnumerable

    IEnumerable: 从服务器处取回所有数据,在客户端根据过滤条件进行过滤再返回结果. IQueryable: 从服务器处进行过滤,直接返回过滤后的结果.