详解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 相关文章推荐
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
js实现文字截断功能
Sep 14 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
简单聊聊TypeScript只读修饰符
Apr 06 Javascript
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
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
php链表用法实例分析
2015/07/09 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
DOM 基本方法
2009/07/18 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
django数据库migrate失败的解决方法解析
2018/02/08 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
python实现简易通讯录修改版
2018/03/13 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
新闻编辑求职信
2014/04/09 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
千手观音观后感
2015/06/03 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS