AngularJS 计数器计数到目标数 [英] AngularJS counter to count up to a target number

问题描述

我是 Angular 的新手，想在 JQuery 中实现同样简单的函数扩展，但是使用指令(据我所知，这是应该如何完成的).

I'm new to Angular, and would like to implement the same easy function extension in JQuery, but use directive (as far as i understand this is how it supposed to be done).

有人知道现成的实现吗?

does somone know ready implimentation?

我的搜索结果只有 JQuery 解决方案，我不知道如何将其转换为 Angular.

my search ended up only with JQuery solutions and i don't know how to convert it to Angular.

这是我需要做的:

链接到示例:http://jsfiddle.net/YWn9t/

你能帮忙吗?

函数声明:

$.fn.countTo.defaults = {
    from: 0,  // the number the element should start at
    to: 100,  // the number the element should end at
    speed: 1000,  // how long it should take to count between the target numbers
    refreshInterval: 100,  // how often the element should be updated
    decimals: 0,  // the number of decimal places to show
    onUpdate: null,  // callback method for every time the element is updated,
    onComplete: null,  // callback method for when the element finishes updating
};

使用方法:

jQuery(function($) {
        $('.timer').countTo({
            from: 50,
            to: 2500,
            speed: 5000,
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });
    });

html:

<span class="timer"></span>

取自:stackoverflow

推荐答案

嗯，它对我不起作用，我没有找到正确的实现，但它帮助我实现我自己的指令.

Well it didn't worked for me, i didn't find the right implementation but it helps me to implement my own directive.

html:

<count-up count-to="1000" interval="1"></count-up>

指令.js

directive('countUp', ['$compile',function($compile,$timeout) {
    return {
        restrict: 'E',
        replace: false,
        scope: {
            countTo: "=countTo",
            interval: '=interval'
        },
        controller: ['$scope', '$element', '$attrs', '$timeout', function ($scope, $element, $attrs, $timeout) {
            $scope.millis = 0;
            if ($element.html().trim().length === 0) {
                $element.append($compile('<span>{{millis}}</span>')($scope));
            } else {
                $element.append($compile($element.contents())($scope));
            }

            var i=0;
            function timeloop () {
                setTimeout(function () {
                    $scope.millis++;
                    $scope.$digest();
                    i++;
                    if (i<$scope.countTo) {
                        timeloop();
                    }
                }, $scope.interval)
            }
            timeloop();
        }]
    }}])

这篇关于AngularJS 计数器计数到目标数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！