详解Angular的双向数据绑定(MV-VM)


Posted in Javascript onDecember 26, 2016

angular的核心MVVM,下面来看看MV(数据到视图)。

<div ng-controller="Aaa">
  <p>{{name}}</p>
</div>
<script type="text/javascript">
  function Aaa($scope){
     $scope.name = 'hello AngularJs';
  setTimeout(function(){



$scope.name = 'Hi';
 
  },2000); 
  };
</script>

执行上面代码,我们使用setTimeout延迟两秒去更新数据(M),我们的视图(V)并没有发生改变。

其实数据确实发生改变,但是我们的视图(V)并没有及时刷新,原因是原生的setTimeout不具备刷新的功能。

angular为我们提供了setTimeout的服务,$timeout,需要在Aaa中引入该服务 !

<div ng-controller="Aaa">
  <p>{{name}}</p>
</div>
<script type="text/javascript">
  function Aaa($scope,$timeout){
    $scope.name = 'hello AngularJs';

$timeout(function(){
   
  $scope.name = 'Hi';
 
 },2000);
  };
<script>

这样就可以刷新视图了,M(数据)到V(视图)的过程。

如果我也想让setTimeout也具有刷新视图的功能怎麽办 ? 可以借助$apply方法!

<div ng-controller="Aaa">
  <p>{{name}}</p>
</div>
<script type="text/javascript">
  function Aaa($scope){
    $scope.name = 'hello AngularJs';
    setTimeout(function(){
      $scope.$apply(function(){
        $scope.name = 'Hi';
      });
    },2000);
  }
<script>

也能实现刷新视图!

在举个例子:

<div id="Aaa" ng-controller="Aaa" ng-click="name='Hi'">
  <p>{{name}}</p>
</div>
<script type="text/javascript">
  function Aaa($scope){
    $scope.name = 'hello AngularJs';
  };
</script>

我们在ID为Aaa的元素绑定了一个点击事件,当发生点击的时候将name值改为Hi,

当然,也可以传递一个函数,来实现更多的功能。

<div id="Aaa" ng-controller="Aaa" ng-click="show()">
  <p>{{name}}</p>
</div>
<script type="text/javascript">
  function Aaa($scope){
    $scope.name = 'hello AngularJs';
    $scope.show = function(){
      $scope.name = 'Hi';
    };
  }
</script>

看到了click,相信你也知道如何使用鼠标移入和移出的这些常用的事件了。

看最后一个例子,V(视图)到M(数据)的过程。

<div ng-controller="Aaa">
  <input type="text" ng-model="name"/>
  <p>{{name}}</p>
</div>
<script type="text/javascript">
  function Aaa($scope){
    $scope.name = 'hello AngularJs';
  };
</script>

我们在input标签上绑定了一个ng-model,这个就是绑定的数据,会默认填充到input的value上,当我们的input值发生改变的时候,对应在$scope中的数据也会发生改变,从而影响到视图中的p标签的值也会发生改变。

详解Angular的双向数据绑定(MV-VM)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
详解Vue的sync修饰符
May 15 Vue.js
Angular工具方法学习
Dec 26 #Javascript
angular双向绑定模拟探索
Dec 26 #Javascript
jquery Banner轮播选项卡
Dec 26 #Javascript
Javascript中常用类型的格式化方法小结
Dec 26 #Javascript
Angular的自定义指令以及实例
Dec 26 #Javascript
如何提高javascript加载速度
Dec 26 #Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 #Javascript
You might like
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
浅谈php扩展imagick
2014/06/02 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
给Python初学者的一些编程技巧
2015/04/03 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python中的二维列表实例详解
2018/06/19 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
程序员机试试题汇总
2012/03/07 面试题
酒店led欢迎词
2014/01/09 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
中学生励志演讲稿
2014/04/26 职场文书
求职教师自荐书
2014/06/19 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS