Plug-in / diretiva do odômetro HubSpot para AngularJS

O HubSpot tem um bom hodômetro como a biblioteca de transição de números em https://github.com/HubSpot/odometer . Recentemente, usei isso para um projeto Angular.JS e escrevi uma diretiva para implementá-lo.

var el = document.querySelector('.some-element');

od = new Odometer({
  el: el,
  value: 333555,

  // Any option (other than auto and selector) can be passed in here
  format: '',
  theme: 'digital'
});

od.update(555)

O código acima é um exemplo de implementação de http://github.hubspot.com/odometer . Para nosso uso, iremos converter isso em uma diretiva que pode ser usada em nossas visualizações como abaixo.

<odometer value='countToNumber'></odometer>

Aqui, countToNumber é um modelo em nosso escopo.

Portanto, o código para a diretiva precisa aceitar o modelo e inicializar o plugin Odometer.

angular.module('myApp')
  .directive('odometer', function () {
    return {
      restrict: 'E',
      scope : {
        endValue : '=value'
      },
      link: function(scope, element) {
        // If you want to change the format, you have to add the necessary
        //  parameters. In this case I am going with the defaults.
        var od = new Odometer({
            el : element[0],
            value : 0   // default value
        });
        // update the odometer element when there is a 
        // change in the model value.
        scope.$watch('endValue', function() {
          od.update(scope.endValue);
        });
      }
    };
  })