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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
php+dbfile开发小型留言本
2006/10/09 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
Python创建xml的方法
2015/03/10 Python
Python爬取读者并制作成PDF
2015/03/10 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
求职自荐信范文格式
2013/11/29 职场文书
网络编辑职责
2014/03/01 职场文书
中文专业自荐书
2014/06/29 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL