Javascript到AngularJS指令

Question

有沒有人將Justgage圖表的普通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);
        });
      }
    };
  }]);