javascript AngularJS 计数器计数到目标数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21252936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS counter to count up to a target number
提问by Liad Livnat
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).
我是 Angular 的新手，想在 JQuery 中实现相同的简单函数扩展，但使用指令（据我所知，这是应该如何完成的）。
does somone know ready implimentation?
有人知道现成的实现吗？
my search ended up only with JQuery solutions and i don't know how to convert it to Angular.
我的搜索最终只有 JQuery 解决方案，我不知道如何将其转换为 Angular。
this is what i needed to do:
这是我需要做的：
link to example: http://jsfiddle.net/YWn9t/
链接到示例：http: //jsfiddle.net/YWn9t/
can you help?
你能帮我吗？
function declaration:
函数声明：
$.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
};
how to use:
如何使用：
jQuery(function($) {
$('.timer').countTo({
from: 50,
to: 2500,
speed: 5000,
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
}
});
});
html:
html：
<span class="timer"></span>
taken from: stackoverflow
回答by Liad Livnat
Well it didn't worked for me, i didn't find the right implementation but it helps me to implement my own directive.
好吧，它对我不起作用，我没有找到正确的实现，但它帮助我实现我自己的指令。
html:
html：
<count-up count-to="1000" interval="1"></count-up>
directive.js
指令.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();
}]
}}])
回答by DDD
Since looks like nobody was able to provide a simple and easy to use solution without including a huge dependency and providing readable / quality code. Heres a super simple directive for angular 1.6.x that utilizes interpolation.
因为看起来没有人能够提供简单易用的解决方案，而无需包含巨大的依赖项并提供可读/高质量的代码。这是一个使用插值的 angular 1.6.x 的超级简单指令。
HTML
HTML
<ng-Counter target="mymodel.countvalue" speed="10" start="mymodel.startfromvalue"/>
This one has 3 attributes:
这个有3个属性：
- targetthe number to reach
- speedthe speed..
- startthe number to start from
- 定位要达到的人数
- 速度速度..
- 开始编号
It will handle both count up & down. Also automatically starts counting whenever the target model is updated, if you define the start then it will reset the counter whenever its updated.
它将处理向上和向下计数。每当更新目标模型时，也会自动开始计数，如果您定义了开始，那么它会在更新时重置计数器。
ngCounter.js:
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);
}
};
},
};
});
