2013-12-13 2 views
1

Итак, я новичок в javascript и еще новее с угловым и задаю вопрос «как это сделать»: в моем угловом контроллере панели я написал код, чтобы сделать Плитка выглядит так, как на телефоне Windows. Он просто отображает число, но подсчитывает от 0 с привязкой живых данных. Мой вопрос в том, как можно реорганизовать это на другой модуль, поэтому я могу просто вызвать метод, подобный zoomUpFromZero (databoundField). Исходя из фона C#, я бы передал поле привязки данных по ссылке. Но в javascript это не представляется возможным.javascript или угловой проход/databind по реф.

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(); 

Я бы обернуть все это в функции и он выяснить правильное количество Millis между вызовами, чтобы сделать это займет около секунды. Это можно сделать?

ответ

0

Вот решение: http://jsfiddle.net/bUkGL/1/

Основная идея здесь, чтобы обернуть «масштаб» в directive, которые являются вещи в угловому, которые несут ответственность за выполнение манипуляции 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 и провод его в обработку переваривать угловые в. Вы также можете, если хотите получить действительно фантазию, добавить вещи к хешу scope, чтобы разрешить параметризацию интервала и т. Д.

+0

Ницца! zoomy awesomeness. – Rick242

+0

Самое простое решение и, вероятно, правильное - украсить элемент директивой, и оно просто работает. Благодаря! Теперь, как получить мой голос, чтобы я мог голосовать ... – Rick242

1

Вы можете просто передать функцию в функцию масштабирования, которая задает поле для имитации прохождения поля на Справка. например

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() к внешней службе.

+0

Я должен был подумать об этом. Простой и элегантный. Спасибо rob! – Rick242

Смежные вопросы