AngularJS之定时器 $interval

今天写代码需要用一个定时器来轮询状态,根据状态来设置ng-class不同的样式。发现在angularjs中写定时器的话,虽然modle更新了,但是视图并没有变化,经过不懈的尝试,找到了解决办法, 使用angularjs内置的$apply来主动告知angularjs进行视图更新,点击查询$apply介绍

下面是示例

  • html

    1
    2
    3
    <div ng-class="{true: 'progress', false: 'hide'}[visible]">
    内容
    </div>
  • js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    app.controller('dataCtrl', function($scope, $http, $filter) {
    $scope.process = 0;
    $scope.visible = false;//
    var updateHide = function() {
    if ($scope.process >= 100) {
    $scope.visible = false;
    }
    };
    setInterval(function() {
    $scope.$apply(updateHide);
    }, 500);
    // some code
    }

$interval

$interval 是对原生setInterval的一种封装,它会在每次方法调用后自动的执行`$apply``
api是这样的:

1
$interval(fn, delay, [count], [invokeApply], [Pass]);

fn是目标方法

delay 是延迟时间,单位是毫秒

count 是一共循环多少次

invokeApply 是指是否调用$apply方法,默认true

Pass是方法运行是传的参数

  • 对文章开始代码进行改写
1
2
3
4
5
6
7
8
9
10
11
app.controller('dataCtrl', function($scope, $http, $filter) {
$scope.process = 0;
$scope.visible = false;//
var p = $interval(function() {
if ($scope.process >= 100) {
$scope.visible = false;
}
}, 500);
// $interval.cancel(p); 取消
// some code
}

参考文档

each.sinaapp.com/angular/apps/app-timer.html

https://code.angularjs.org/1.4.8/docs/api/ng/service/$interval