Javascript to AngularJS指令

Question

有没有人将justgage chart的纯javascript代码转换为angularjs指令。我通过互联网找到了一对夫妻，但对我没有帮助。

<div id="g3"></div> 
<script type='text/javascript' src="https://code.jquery.com/jquery- 3.1.1.min.js"></script> 
<script src="../raphael-2.1.4.min.js"></script> 
<script src="../justgage.js"></script> 
<script> 

$(document).ready(function() { 
    var g3;  

    var g3 = new JustGage({ 
    id: "g3", 
    value: getRandomInt(0, 100), 
    min: 0, 
    max: 100, 
    title: "Custom Colors", 
    label: "", 
    customSectors: [{ 
    color : "#00ff00", 
    lo : 0, 
    hi : 40 
    },{ 
    color : "#00fff6", 
    lo : 41, 
    hi : 80 
    },{ 
    color : "#ff0000", 
    lo : 81, 
    hi : 100 
    }], 

    counter: true 
    }); 


    setInterval(function() { 

     g3.refresh(getRandomInt(0, 100)); 
    }, 2500); 

}); 
</script> 

Answer 1

您可以尝试使用https://github.com/mattlaver/angular-justgage库。如果它不适合你，你可以创建你自己的指令。

注意，从https://github.com/mattlaver/angular-justgage/blob/master/ng-justgage.js指令

查看

<just-gage id="d3" class="someClass" min=0 max=100 value=42 title="Test 1"></just-gage> 

指令采取了这种代码

angular.module('app', []) 
    .directive('justGage', ['$timeout', function ($timeout) { 
    return { 
     restrict: 'EA', 
     scope: { 
     id: '@', 
     class: '@', 
     min: '=', 
     max: '=', 
     title: '@', 
     label: '@', 
     value: '@', 
     options: '=' 
     }, 
     template: '<div id="{{id}}-justgage" class="{{class}}"></div>', 
     link: function (scope, element, attrs) { 
     $timeout(function() { 
      var options = { 
      id: scope.id + '-justgage', 
      min: scope.min || 0, 
      max: scope.max || 100, 
      title: scope.title, 
      label: scope.label || '', 
      value: scope.value 
      }; 

      if (scope.options) { 
       for (var key in scope.options) { 
        options[key] = scope.options[key]; 
       } 
      } 

      var graph = new JustGage(options); 

      scope.$watch('max', function (updatedMax) { 
      if (updatedMax !== undefined) { 
       graph.refresh(scope.value, updatedMax); 
      } 
      }, true); 

      scope.$watch('value', function (updatedValue) { 
      if (updatedValue !== undefined) { 
       graph.refresh(updatedValue); 
      } 
      }, true); 
     }); 
     } 
    }; 
    }]);