angularjs 定时更换内容注意事项

说明:js代码都是顺序执行的,如果遇到异步执行,并且带有返回值,angularjs是怎么处理的呢?

下面以实例详细说明一下$apply的功能。


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

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。


【完整版】

<body ng-app="App">
<div ng-controller="PhoneDetailCtrl">
    <p>用户名: {{user}}</p>
</div>
<script>
var App = angular.module('App', []);
App.controller('PhoneDetailCtrl', ['$scope',
	function($scope) {
	   $scope.user = '';
	   $scope.test = function() {
		   setTimeout(function () {
			   $scope.$apply(function () {	//$apply 数据绑定,关键
			   	   $scope.user = "good";
			   })
		   }, 2000);
	   }
	
	   $scope.test1 = function() {
		   $scope.user = 'tank';
	   }
	
	   $scope.test1();
	   $scope.test();
	
	   console.log($scope);
	}
]);
</script>
</body>







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值