脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular 数据绑定

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

 更新时间：2016年12月26日 15:04:36   作者：小谢53  
本文主要对Angular的双向数据绑定(MV-VM)进行实例分析，具有一定的参考价值，下面跟着小编一起来看下吧

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标签的值也会发生改变。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • AngularJs定制样式插入到ueditor中的问题小结

    AngularJs定制样式插入到ueditor中的问题小结

    这篇文章主要介绍了AngularJs定制样式插入到ueditor中的问题小结的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08
  • AngularJS过滤器filter用法分析

    AngularJS过滤器filter用法分析

    这篇文章主要介绍了AngularJS过滤器filter用法,结合实例形式分析了过滤器filter的功能、分类、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • angular8和ngrx8结合使用的步骤介绍

    angular8和ngrx8结合使用的步骤介绍

    这篇文章主要给大家介绍了关于angular8和ngrx8结合使用的详细步骤，文中通过示例代码介绍的非常详细，对大家学习或者使用angular8具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-12-12
  • 解决Angular2 router.navigate刷新页面的问题

    解决Angular2 router.navigate刷新页面的问题

    今天小编就为大家分享一篇解决Angular2 router.navigate刷新页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • angularJS提交表单（form）

    angularJS提交表单（form）

    这篇文章主要介绍了angularJS提交表单（form）的方法和示例,需要的朋友可以参考下
    2015-02-02
  • 使用AngularJS 跨站请求如何解决jsonp请求问题

    使用AngularJS 跨站请求如何解决jsonp请求问题

    这篇文章主要介绍了使用AngularJS 跨站请求如何解决jsonp请求问题，下面通过本文给大家分享解决办法，需要的朋友参考下
    2017-01-01
  • AngularJS包括详解及示例代码

    AngularJS包括详解及示例代码

    本文主要介绍AngularJS包括的基础知识，这里整理了相关资料并附示例代码和实现效果图，有需要的小伙伴可以参考下
    2016-08-08
  • 详解Angular6学习笔记之主从组件

    详解Angular6学习笔记之主从组件

    这篇文章主要介绍了详解Angular6学习笔记之主从组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 详解Angular6 热加载配置方案

    详解Angular6 热加载配置方案

    这篇文章主要介绍了详解Angular6 热加载配置方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 详解angular路由高亮之RouterLinkActive

    详解angular路由高亮之RouterLinkActive

    这篇文章主要介绍了详解angular路由高亮之RouterLinkActive，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04

最新评论