Question

当我将指令用于h3时，我正在使用指令显示仪表板的数字计数效果，我得到的结果为NaN。当我从h3删除指令时，我得到正确的输出。当我查看指令时，值可以从元素中获取，该元素将值显示为NaN。谁能告诉我代码中有什么问题吗？

带有指令的输出：

<h3 animate-numbers="" class="ng-binding">NaN</h3>

HTML：

<h3 animate-numbers>{{vm.dashboard.no_of_applications}}</h3>

控制器：

vm.dashboard = {
  no_of_users: 0,
  no_of_applications: 0,
  no_of_departments: 0,
  no_of_schemes: 0,
};

指令：

'use strict';
angular.module('ss')
 .directive('animateNumbers', function ($timeout, $log) {
return {
replace: false,
scope: true,
link: function (scope, element) {
  var e = element[0];
  $log.log('e is', e);
  var refreshInterval = 30;
  var duration = 1000; //milliseconds
  var number = parseInt(e.innerText);
  var step = 0;
  var num = 0;
  var steps = Math.ceil(duration / refreshInterval);
  var increment = (number / steps);
  var percentCompleted = 0;
  var lastNumberSlowCount = 3;
  if (number > lastNumberSlowCount) {
    number = number - lastNumberSlowCount;
  }
  scope.timoutId = null;
  var slowCounter = function () {
    scope.timoutId = $timeout(function () {
      lastNumberSlowCount --;
      if (lastNumberSlowCount  < 0) {
        $timeout.cancel(scope.timoutId);
      } else {
        number++;
        e.textContent = number;
        slowCounter();
      }
    }, 500);
  };
  var counter = function () {
    scope.timoutId = $timeout(function () {
      num += increment;
      percentCompleted = Math.round((num / number) * 100);
      if (percentCompleted > 60 && percentCompleted < 80) {
        refreshInterval = refreshInterval + 10;
      } else if (percentCompleted > 90) {
        refreshInterval = 200;
      }
      step++;
      if (step >= steps) {
        $timeout.cancel(scope.timoutId);
        num = number;
        e.textContent = number;
        if (number > lastNumberSlowCount) {
          slowCounter();
        }
      } else {
        e.textContent = Math.round(num);
        counter();
      }
    }, refreshInterval);
  };
  counter();
  return true;
}
};
});

在angularJs中使用指令时获取NaN

0 个答案: