首页 > 代码库 > AngularJS入门3-小例子-定时器
AngularJS入门3-小例子-定时器
实现效果：
实现代码：
1 <!DOCTYPE HTML> 2 <html ng-app=""> 3 <head><script src="./angular.min.js"></script></head> 4 <body> 5 <h1>定时器对象</h1> 6 <div ng-controller="ClockController"> 7 <h5>time: {{clock}}</h5> 8 </div> 9 <script type="text/javascript">10 function ClockController($scope, $timeout) {11 var updateClock = function(){12 $scope.clock = new Date();13 $timeout(function(){14 updateClock();15 },1000);16 };17 updateClock();18 } 19 </script> 20 </body>21 </html>
改进写法(最佳实践：在视图中通过对象属性而非对象本身来进行引用绑定，是angular中的最佳实践)：
1 function ClockController($scope) { 2 $scope.clock ={ 3 now: new Date() 4 }; 5 var updateClock = function(){ 6 $scope.clock.now = new Date(); 7 }; 8 setInterval(function(){ 9 $scope.$apply(updateClock);10 },1000);11 12 updateClock();13 }
AngularJS入门3-小例子-定时器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。