Question

我是Angular的新手，想在JQuery中实现相同的简单函数扩展，但使用指令（据我所知，这是它应该如何完成）。

somone知道准备好了吗？

我的搜索仅以JQuery解决方案结束，我不知道如何将其转换为Angular。

这就是我需要做的事情：

你可以帮忙吗？

功能声明：

$.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

Answer 1

它对我没有用，我找不到合适的实现，但它帮助我实现自己的指令。

HTML：

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

directive.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();
        }]
    }}])

Answer 2

查看此指令http://siddii.github.io/angular-timer/。我相信这符合您的所有要求。

Answer 3

https://github.com/Kop4lyf/angular-animation-counter

虽然不如http://siddii.github.io/angular-timer/那么通用，但它很小并且有基本用途。

希望它有所帮助。

Answer 4

因为看起来没有人能够提供简单易用的解决方案而不包含巨大的依赖性并提供可读/高质量的代码。这是一个利用插值的角度1.6.x的超级简单指令。

<强> HTML

<ng-Counter target="mymodel.countvalue" speed="10" start="mymodel.startfromvalue"/>

这个有3个属性：

定位要达到的数字
速度速度..
开始从

它将处理计数和放大下。每当更新目标模型时，也会自动开始计数，如果您定义了开始，那么无论何时更新，它都会重置计数器。

<强> ngCounter.js ：

app.directive("ngCounter", function()
{
    return {
        restrict: 'E',
        template: "<span>{{value | number:0}}</span>",
        scope: {
            target: "=",
            speed: "=?",
            start: "=?",
        },
        link: function ($scope, $element, $attributes)
        {
        },
        controller: function ($scope, $element, $attrs, $timeout)
        {
            $scope.target = 0;
            $scope.start = 0;
            $scope.speed = 1;

            $scope.$watch("target", (newTarget) => {
                $scope.target = newTarget;
                $scope.tickNumber();
            });

            $scope.$watch("start", (newStart) => {
                $scope.value = newStart;
                $scope.tickNumber();
            });

            $scope.$watch("speed", (newSpeed) => {
                $scope.speed = newSpeed;
            });

            $scope.interpolate = function(current, target, delta, speed = 1.0)
            {
                if( InterpSpeed <= 0.0 )
                {
                    return target;
                }

                var distance = target - current;

                if( distance * distance < 0.000001 )
                {
                    return target;
                }

                var move = distance * Math.min(Math.max(delta * speed, 0.0), 1.0);

                return current + move;
            }
            var delta = 1 / 60;
            $scope.updateNumber = () => {
                $scope.value = $scope.interpolate($scope.value, $scope.target, 0.05, $scope.speed);
            };

            $scope.tickNumber = () => {
                if(Math.abs($scope.value - $scope.target) > 0)
                {
                    $scope.updateNumber();
                    $timeout($scope.tickNumber, 50);
                }
            };

        },
    };

});

AngularJS计数器计数到目标数

4 个答案: