Question

所以我是javascript的新手，甚至是更新的角度，并且有一个'我该怎么做'这个问题：在我的角度仪表板控制器中，我写了一些代码，让一块瓷砖看起来就像在Windows手机上一样。它只显示一个数字，但从0开始向实时数据绑定计数。我的问题是如何将其重构为另一个模块，以便我可以调用像zoomUpFromZero（databoundField）这样的方法。来自C＃背景，我将通过引用传递数据绑定字段。但在javascript中，这似乎不可能。

var devCount = vm.deviceCount;
vm.deviceCount = 0;
var prom;

function zoomFromZero() {
  if (vm.deviceCount >= devCount) {
    stopit();
  } else {
    vm.deviceCount++;
    prom = common.$timeout(zoomFromZero, 30);
  }
};

function stopit() {
  common.$timeout.cancel(prom);
};

zoomFromZero();

我将整个事情包装在一个函数中，并让它在调用之间找出正确的毫秒数，使其花费大约一秒钟。可以这样做吗？

Answer 1

您可以将一个函数传递给缩放功能，该功能将字段设置为模拟通过引用传递字段。 e.g。

function zoomRange(setField, minValue, maxValue) {
    setField(minValue);
    minValue++;

    if (minValue <= maxValue) {
        $timeout(function() {zoomRange(setField, minValue, maxValue);}, 50);
    }
};

您可以像这样调用函数：

zoomRange(function(val) {vm.deviceCount = val}, 0, 10);

然后，您可以将zoomRange()功能移动到外部服务。

Answer 2

这是一个解决方案：http://jsfiddle.net/bUkGL/1/

这里的一般想法是将“缩放”包装成directive，这是Angular中负责进行DOM操作的东西。对于后代，这是代码：

angular.module('stackoverflow', []).directive('zoomToNumber', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        scope: {
            zoomToNumber: '='
        },
        link: function(scope, element) {
            scope.$watch('zoomToNumber', function(num) {
                var currentNumber = 0;

                function updateNumber() {
                    element.text(currentNumber);

                    if(currentNumber < num) {
                        $timeout(updateNumber, 20); // here's your interval
                    }

                    currentNumber++;
                }

                updateNumber();
            });
        }
    };
}]);

请注意，我们引入了AngularJS的$timeout服务，这很重要，因为它包装window.setTimeout并将其连接到Angular的摘要处理中。您也可以，如果您想要真正喜欢，可以在scope哈希中添加内容以允许参数化间隔等。

javascript或角度传递/数据绑定由ref

2 个答案: