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,就是为了异步负值用的。

相关文章
|
人工智能 调度
【MCP教程系列】在阿里云百炼上用Qwen3+且慢MCP,用AI重新定义资产管理效率
通义千问Qwen3通过MCP协议,在Agent中具备强大的工具调度与复杂任务拆解能力,成为构建复杂AI应用的核心引擎。以“基金助手”为例,集成且慢MCP服务后,可一键调用多源金融数据并动态组合分析工具,实现精准调度。在阿里云百炼平台上,只需4步即可构建一个“金融顾问”智能体:开通且慢MCP服务、新建智能体、添加MCP技能、测试效果。此外,还可增加提示词规范输出内容,完成更复杂的任务。
1292 0
|
9月前
|
运维 安全 网络安全
企业级通配符 SSL 证书:企业网络安全的坚实护盾
企业级通配符SSL证书是企业的网络“身份证”,一个证书即可保护主域名及所有子域名,简化管理流程。它采用先进加密算法,确保数据传输安全,防止黑客攻击。拥有此证书可提升网站信任度,增强品牌形象,吸引更多客户。同时,它灵活适配业务变化,降低成本,为企业数字化发展提供有力支持。
|
开发框架 前端开发 JavaScript
微信小游戏案例三 抓星星
微信小游戏案例三 抓星星
289 0
微信小游戏案例三 抓星星
|
SQL 存储 前端开发
阿里巴巴数据库分库分表的实践(4)
阿里巴巴数据库分库分表的实践(4)
881 0
阿里巴巴数据库分库分表的实践(4)
|
网络虚拟化
干货 | 华三 Monitor Link常用功能配置操作
干货 | 华三 Monitor Link常用功能配置操作
443 0
解决lambda中必须为final的方式
解决lambda中必须为final的方式
771 0
|
存储 人工智能 自然语言处理
利用AI技术实现智能客服系统
【8月更文挑战第27天】本文将介绍如何利用人工智能(AI)技术构建一个智能客服系统,以提高客户服务效率和质量。我们将从需求分析、系统设计、功能实现等方面进行详细阐述,并通过实际代码示例展示如何实现一个简单的智能客服系统。
|
前端开发
CSS网页布局综合练习(涵盖大多CSS知识点)
CSS网页布局综合练习(涵盖大多CSS知识点)
|
存储 弹性计算 运维
阿里云服务器ECS经济型e实例详细介绍
阿里云新推经济型e系列服务器,适用于个人开发者、学生和小微企业。该系列采用Intel Xeon Platinum处理器,支持多种CPU内存配比,性价比高,不限购,续费不涨价。2核2G3M配置仅需99元/年,企业用户2核4G5M服务器199元/年。具备价格优势、品质保障和充足供应,但性能可能不及企业级实例。支持IPv4/IPv6,仅限专有网络VPC。更多规格和性能指标可见官方文档。
阿里云服务器ECS经济型e实例详细介绍
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线学习过程管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线学习过程管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
194 6
基于SpringBoot+Vue+uniapp的在线学习过程管理系统的详细设计和实现(源码+lw+部署文档+讲解等)