`
hudeyong926
  • 浏览: 2028467 次
  • 来自: 武汉
社区版块
存档分类
最新评论

angularjs $apply 数据绑定

 
阅读更多

js代码都是顺序执行的,如果遇到异步执行,并且带有返回值,angularjs是怎么处理的呢?下面以实例详细说明一下$apply的功能。

1,angularjs数据绑定了,但是没有在html中显示出来

因为所有的{{表达式}}都在ng-的事件会触发显示,虽然值变了,没有ng-触发

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
  function($scope, $routeParams) {
     $scope.user = '';
     $scope.test = function() {
         setTimeout(function () {
             $scope.user = "good";
         }, 2000);
     }

     $scope.test1 = function() {
          $scope.user = 'tank';
     }

     $scope.test1();
     $scope.test();

     console.log($scope);
  }
]);

上例解释:

正常理解是:在html显示tank,2秒后,会变成good。

实际情况是:html显示tank,2秒后,不会成good。

我开始以为是setTimeout里面的程序并没有执行,但是我用console.log($scope);发现$scope.user值改变了,是good,但是为什么没有在html里面体现出来呢。

怎么样才能让html中的{{user}}自动变呢。

     $scope.test = function() {
         setTimeout(function () {
             $scope.$apply(function () {
                 $scope.user = "good";
             });
         }, 2000);
     }

这样就可以了,在html显示tank,2秒后,会变成good。

2,第三方登录,登录成功后,读取返回值

$scope.getUserInfo = function(response){
    FB.api('/me', function(response1) {
        $scope.$apply(function() {
            $scope.user = { 'AccessToken':response.authResponse.accessToken,
                            'facebook_uid':response.authResponse.userID,
                            'name':response1.name
                          }
        });
    });
}

登录到成功后,从第三方api接口,读取个人信息,也是一个异步的过程。感觉$apply,就是为了异步负值用的。

 

分享到:
评论

相关推荐

    angularjs 中$apply,$digest,$watch详解

    总结来说,`$apply`、`$digest`和`$watch`在AngularJS中构建了一个强大的数据绑定系统,确保了模型和视图的一致性。`$apply`负责将外部的变更引入AngularJS的上下文,`$digest`负责检查这些变更并更新视图,而`$...

    理解$watch ,$apply 和 $digest --- 理解数据绑定过程

    在AngularJS中,数据绑定是框架的核心特性之一,它使得视图与模型之间的交互变得简单。$watch,$apply和$digest是实现双向数据绑定的关键机制。本文将深入探讨这三个概念,帮助你更好地理解AngularJS的数据绑定过程...

    AngularJS入门教程之数据绑定原理详解

    AngularJS是一个流行的前端JavaScript框架,它通过数据绑定机制简化了Web开发。数据绑定是AngularJS的核心特性之一,能够实现模型和视图之间的同步更新。在AngularJS中,数据绑定主要分为两大类:双向数据绑定和单向...

    AngularJS双向数据绑定原理之$watch、$apply和$digest的应用

    AngularJS通过几个核心的机制:$watch、$apply、$digest来实现双向数据绑定。 首先,$watch机制是AngularJS数据绑定的核心组件之一。当我们将一个表达式绑定到视图时,AngularJS会将这个表达式放入到一个内部的$...

    angularJS中$apply()方法详解

    AngularJS的核心概念之一是响应式数据绑定,这意味着当模型(即JavaScript对象)的数据变化时,视图(即HTML模板)会自动更新,反之亦然。这种机制通常被称为“脏检查”,因为它“检查”模型中是否有数据发生变化,...

    AngularJS中$apply方法和$watch方法用法总结

    在AngularJS中,$apply和$watch是两个非常重要的概念,它们主要用于数据绑定和变更检测。下面是关于这两个方法的详细说明: ### $apply方法 **功能**: AngularJS的$apply方法用于将非AngularJS环境中的代码变化...

    实例剖析AngularJS框架中数据的双向绑定运用

    它将数据绑定和事件处理封装得非常简单易用,开发者可以在开发过程中大量减少对DOM操作的关注,更加专注于应用逻辑和数据处理。但同时我们也需要注意,由于AngularJS主要针对单页面应用的开发,因此在理解双向绑定的...

    AngularJS中的$watch(),$digest()和$apply()区分

    在AngularJS中,数据绑定是其核心特性之一,它允许开发者以声明式的方式将模型(Model)和视图(View)联系起来。为了实现这一特性,AngularJS提供了三个核心函数:$watch()、$digest()和$apply()。下面将详细介绍这...

    说说AngularJS中的$parse和$eval的用法

    在AngularJS中,$parse和$eval...理解这两个服务的用法对于编写AngularJS指令和处理数据绑定非常重要。在实际开发中,正确使用$parse和$eval可以帮助我们更好地控制数据流和视图更新,从而实现更灵活和高效的前端应用。

    第2部分:AngularJS中的数据绑定

    此外,理解`$watch`、`$digest`和`$apply`等核心概念也至关重要,它们是AngularJS实现数据绑定背后的机制。 **最佳实践** 在实际开发中,合理使用数据绑定能提高代码的可读性和维护性。但过度依赖双向绑定可能导致...

    浅谈AngularJs 双向绑定原理(数据绑定机制)

    在本文中,我们将深入探讨AngularJS的双向绑定原理,这是数据绑定机制的一种高效实现,它极大地简化了前端开发。双向绑定使得模型(Model)和视图(View)之间能够实时同步,无需手动操作DOM。 首先,理解数据绑定...

    Angularjs中的$apply及优化使用详解

    angular js的双向数据绑定,在开发中起到的作用灰常大,所以下面这篇文章主要给大家介绍了关于Angularjs中$apply及优化使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧

    全面解析Angular中$Apply()及$Digest()的区别

    $apply()和$digest()在...AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding),这个特性大大简化了我们的代码编写方式。数据绑定意味着当View中有任何数据发生了变化,那么这个变化也会自

    浅谈关于angularJs中使用$.ajax的注意点

    首先,从设计原则出发,AngularJS和jQuery是两种不同的前端框架,它们都有自己的数据绑定和事件处理机制。AngularJS提倡的是声明式编程,而jQuery则偏向于命令式编程。混合使用两者可能导致代码难以维护,因为它们的...

    angularjs 的数据绑定实现原理

    在处理数据绑定时,AngularJS还会涉及脏检查机制、$apply函数、$digest循环、$watch监听器等关键概念。脏检查机制是AngularJS监听数据变化的方式,它会在一定周期内检查作用域(scope)上的所有$watch监听器,看看...

    对angular 实时更新模板视图的方法$apply详解

    在AngularJS中,$apply函数是一个非常重要的方法,它用于将JavaScript代码中的变化传播到整个框架中,确保视图能够实时更新,反映出最新的数据状态。$apply方法可以执行一个函数,并且将任何在函数中产生的异常包装...

    AngularJS 0005:作用域

    理解作用域是深入学习AngularJS的关键,因为它是应用程序中数据绑定的核心机制。 **作用域层次结构** AngularJS中的作用域具有树形结构,与DOM(Document Object Model)结构相对应。每个控制器(Controller)都有...

Global site tag (gtag.js) - Google Analytics