AngularJS学习笔记(三)数据双向绑定的简单实例  更新时间:2016年11月08日 11:07:17   作者:Localhost   这篇文章主要介绍了AngularJS学习笔记(三)数据双向绑定的简单实例,详解数据双向绑定实例的相关资料,需要的朋友可以参考下。 双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听、数据同步上,关于双向更新,可看下图: 数据–>视图 这里我们只演示有了数据以后,如何绑定到视图上。 username=’李四’ {{username}} 点击按钮之后,div内容变成 李四,效果如图: 视图—>数据 上个例子,我们看了数据变化后,视图也会自动变化。那么这个例子则是反过来,视图变化,导致数据也跟着变化,那么数据变化后,我们如何知道呢,这儿我们可以通过另外一个元素将数据再显示出来。 {{username}} 查看效果: 实现机制 angular对常用的dom事件,xhr事件等做了封装, 在里面触发进入angular的digest流程。 在digest流程里面, 会从rootscope开始遍历, 检查所有的watcher。 您可能感兴趣的文章: javascript实现数据双向绑定的三种方式小结 Vue.js每天必学之数据双向绑定 轻松实现javascript数据双向绑定 深入学习AngularJS中数据的双向绑定机制 浅谈AngularJs 双向绑定原理(数据绑定机制) Vue.js第一天学习笔记(数据的双向绑定、常用指令) 深入理解Angularjs向指令传递数据双向绑定机制 JS原生数据双向绑定实现代码 实例剖析AngularJS框架中数据的双向绑定运用 js实现数据双向绑定(访问器监听) angular 双向绑定 相关文章 AngularJS中$http使用的简单介绍 在AngularJS中主要使用$http服务与远程http服务器交互,本篇文章主要介绍了AngularJS中$http使用的简单介绍,非常具有实用价值,需要的朋友可以参考下。 2017-03-03 浅谈Angular的$q, defer, promise 本文主要对Angular的 $q, defer, promise进行实例分析介绍。具有很好的参考价值,需要的朋友一起来看下吧 2016-12-12 Angular 利用路由跳转到指定页面的指定位置方法 今天小编就为大家分享一篇Angular 利用路由跳转到指定页面的指定位置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 Angular懒加载机制刷新后无法回退的快速解决方法 使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.怎么回事呢?下面小编给大家带来了angular懒加载机制刷新后无法回退的快速解决方法,非常不错,感兴趣的朋友参考下 2016-08-08 Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证) AngularJS提供了表单验证,但是验证的过程交互体验很不好,比如重设密码,重复密码的时候一键入就会提示密码不正确。现在小编给大家整理了两种方法,需要的的朋友参考下吧 2017-05-05 AngularJS实用基础知识_入门必备篇(推荐) 下面小编就为大家带来一篇AngularJS实用基础知识_入门必备篇(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-07-07 Angularjs实现mvvm式的选项卡示例代码 每位Web开发者应该都知道,选项卡是现代web网页中最常用的效果之一,所以本文重点是用angularjs这个非常火mvvm框架,实现选项卡效果。有需要的朋友们可以参考借鉴,下面来一起看看吧。 2016-09-09 基于angularJS的表单验证指令介绍 下面小编就为大家带来一篇基于angularJS的表单验证指令介绍。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-10-10 AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】 这篇文章主要介绍了AngularJS使用ng-repeat和ng-if实现数据的删选显示效果,非常适用于表单数据的显示使用,涉及ng-repeat和ng-if命令的相关使用技巧,需要的朋友可以参考下 2016-12-12 关于Angularjs中跨域设置白名单问题 这篇文章主要介绍了Angularjs中关于跨域设置白名单问题,需要的朋友可以参考下 2018-04-04 最新评论

双向绑定

双向绑定是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。

您可能感兴趣的文章:

  • javascript实现数据双向绑定的三种方式小结
  • Vue.js每天必学之数据双向绑定
  • 轻松实现javascript数据双向绑定
  • 深入学习AngularJS中数据的双向绑定机制
  • 浅谈AngularJs 双向绑定原理(数据绑定机制)
  • Vue.js第一天学习笔记(数据的双向绑定、常用指令)
  • 深入理解Angularjs向指令传递数据双向绑定机制
  • JS原生数据双向绑定实现代码
  • 实例剖析AngularJS框架中数据的双向绑定运用
  • js实现数据双向绑定(访问器监听)
张贴在3