脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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标签的值也会发生改变。

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

您可能感兴趣的文章:

相关文章

  • Angular中SASS样式的详细使用教程

    Angular中SASS样式的详细使用教程

    对于一个Sass用户,只需要理解Sass扩展部分如何工作的,就能完全理解SCSS,下面这篇文章主要给大家介绍了关于Angular中SASS样式的详细使用教程,需要的朋友可以参考下
    2022-05-05
  • angularjs利用directive实现移动端自定义软键盘的示例

    angularjs利用directive实现移动端自定义软键盘的示例

    下面小编就为大家带来一篇angularJS利用directive实现移动端自定义软键盘的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • AngularJS实现元素显示和隐藏的几个案例

    AngularJS实现元素显示和隐藏的几个案例

    这篇文章主要介绍了AngularJS实现元素显示和隐藏的几个案例，需要的朋友可以参考下
    2015-12-12
  • AngularJS实现的select二级联动下拉菜单功能示例

    AngularJS实现的select二级联动下拉菜单功能示例

    这篇文章主要介绍了AngularJS实现的select二级联动下拉菜单功能,结合完整实例形式分析了AngularJS实现二级联动菜单的具体操作步骤与相关实现技巧,需要的朋友可以参考下
    2017-10-10
  • AngularJs定时器$interval 和 $timeout详解

    AngularJs定时器$interval 和 $timeout详解

    这篇文章主要介绍了AngularJs定时器$interval 和 $timeout详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • AngularJS动态加载模块和依赖的方法分析

    AngularJS动态加载模块和依赖的方法分析

    这篇文章主要介绍了AngularJS动态加载模块和依赖的方法,结合实例形式分析了AngularJS使用ocLazyLoad实现动态加载的相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • Angularjs实现mvvm式的选项卡示例代码

    Angularjs实现mvvm式的选项卡示例代码

    每位Web开发者应该都知道，选项卡是现代web网页中最常用的效果之一，所以本文重点是用angularjs这个非常火mvvm框架，实现选项卡效果。有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-09-09
  • AngularJS辅助库browserTrigger用法示例

    AngularJS辅助库browserTrigger用法示例

    这篇文章主要介绍了AngularJS辅助库browserTrigger用法,结合实例形式分析了辅助库browserTrigger的功能及单元测试中的使用技巧,需要的朋友可以参考下
    2016-11-11
  • AngularJS中filter的使用实例详解

    AngularJS中filter的使用实例详解

    这篇文章主要介绍了AngularJS中filter的使用实例详解的相关资料,这里提供实例帮助大家理解掌握，希望能帮助到大家，需要的朋友可以参考下
    2017-08-08
  • 将angular-ui的分页组件封装成指令的方法详解

    将angular-ui的分页组件封装成指令的方法详解

    这篇文章主要给大家介绍了将angular-ui的分页组件封装成指令的方法，文中介绍的非常详细，相信会对大家的学习或者工作觉有一定的参考价值，需要的朋友下面来一起看看吧。
    2017-05-05

最新评论