angularjs $apply 数据绑定

简介:

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

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

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

Java代码   收藏代码
  1. phonecatControllers.controller('PhoneDetailCtrl', ['$scope''$routeParams',  
  2.   function($scope, $routeParams) {  
  3.      $scope.user = '';  
  4.      $scope.test = function() {  
  5.          setTimeout(function () {  
  6.              $scope.user = "good";  
  7.          }, 2000);  
  8.      }  
  9.   
  10.      $scope.test1 = function() {  
  11.           $scope.user = 'tank';  
  12.      }  
  13.   
  14.      $scope.test1();  
  15.      $scope.test();  
  16.   
  17.      console.log($scope);  
  18.   }  
  19. ]);  

上例解释:

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

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

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

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

Java代码   收藏代码
  1. $scope.test = function() {  
  2.     setTimeout(function () {  
  3.         $scope.$apply(function () {  
  4.             $scope.user = "good";  
  5.         });  
  6.     }, 2000);  
  7. }  

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

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

Java代码   收藏代码
  1. $scope.getUserInfo = function(response){  
  2.     FB.api('/me', function(response1) {  
  3.         $scope.$apply(function() {  
  4.             $scope.user = { 'AccessToken':response.authResponse.accessToken,  
  5.                             'facebook_uid':response.authResponse.userID,  
  6.                             'name':response1.name  
  7.                           }  
  8.         });  
  9.     });  
  10. }  

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

相关文章
|
7月前
|
JavaScript
AngularJS中的自定义指令:创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中,可以创建自定义指令,如示例中的`myCustomDirective`。指令的属性(如`restrict`、`template`、`replace`)和方法(如`link`、`scope`)可定制其行为。在HTML中使用`restrict`指定的方式(如元素、属性等)来插入指令。遵循命名规范,避免直接DOM操作,使用隔离作用域和关注重用性与扩展性,能有效提升代码质量。自定义指令是AngularJS强大功能之一,有助于实现复杂DOM操作和组件复用。
|
前端开发 JavaScript 开发者
AngularJS 和 React区别
@[TOC](目录) AngularJS 和 React 是两个目前最为流行的前端框架之一。它们有一些共同点,例如都是基于 JavaScript 的开源框架,都能够帮助开发者构建复杂的单页面应用程序等。但也存在一些不同点,如下所述: # 1. 背景: AngularJS 由 Google 的前雇员 Misko Hevery 开发,并于 2010 年首次发布。它是一个基于 JavaScript 的前端框架,旨在简化应用程序的开发过程。React 由 Facebook 的前雇员 Mark Zuckerberg 开发,并于 2013 年首次发布。它是一个基于 JavaScript 的库,可以用于
156 0
|
监控 JavaScript 前端开发
angularJS学习小结——$apply方法和$watch方法
angularJS学习小结——$apply方法和$watch方法
114 0
|
Java JavaScript C++
优化Angularjs的$watch方法
Angularjs的$watch相信大家都知道,而且也经常使用,甚至,你还在为它的某些行为感到恼火。比如,一进入页面,它就会调用一次,我明明希望它在我初始化之后,值再次变动才调用。这种行为给我们带来许多麻烦。
2155 0
|
JavaScript
AngularJs-03-数据的双向绑定
<!DOCTYPE html> <html lang="zh" ng-app="myapp"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.
1218 0
|
JavaScript 前端开发
|
JavaScript 前端开发