AngularJS学习笔记(三)数据双向绑定的简单实例


Posted in Javascript onNovember 08, 2016

双向绑定

双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听、数据同步上,关于双向更新,可看下图:AngularJS学习笔记(三)数据双向绑定的简单实例

数据-->视图

这里我们只演示有了数据以后,如何绑定到视图上。

<!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内容变成 李四,效果如图:
AngularJS学习笔记(三)数据双向绑定的简单实例

视图—>数据

上个例子,我们看了数据变化后,视图也会自动变化。那么这个例子则是反过来,视图变化,导致数据也跟着变化,那么数据变化后,我们如何知道呢,这儿我们可以通过另外一个元素将数据再显示出来。

<!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>

查看效果:
AngularJS学习笔记(三)数据双向绑定的简单实例

实现机制

angular对常用的dom事件,xhr事件等做了封装, 在里面触发进入angular的digest流程。

在digest流程里面, 会从rootscope开始遍历, 检查所有的watcher。

Javascript 相关文章推荐
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
基于Vue实现timepicker
Apr 25 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 #Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 #Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 #Javascript
AngularJS压缩JS技巧分析
Nov 08 #Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 #Javascript
bootstrap fileinput完整实例分享
Nov 08 #Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 #Javascript
You might like
php中http_build_query 的一个问题
2012/03/25 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
html下载本地
2006/06/19 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
python用户管理系统
2018/03/13 Python
【python】matplotlib动态显示详解
2019/04/11 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
小学安全教育材料
2014/02/17 职场文书
自主招生学校推荐信
2014/09/26 职场文书
农业生产宣传标语
2014/10/08 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB