javascript - 循环插件无法在ng重复中正常工作

我正在尝试使用circliful（jQuery插件https://longren.io/circliful-a-jquery-plugin-providing-animated-progress-circles/）在ng重复中创建一堆图形。但是它不起作用。在ng内重复使用时，circliful无法正常工作。

<div ng-repeat="type in types">
   <div>
       <div id="myStat" data-dimension="300" data-text="{{type.value}}" data-info="" data-type="half"    data-width="40" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#fff" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"></div>
   </div>
</div>

任何帮助将不胜感激。谢谢！

最佳答案

首先，您将拥有具有相同ID #myStat的多个ID属性，并且属性错误。

其次，您将不得不调用$（'＃myStat'）。circliful（）;。在AngularJS渲染div＃myStat之后。

为了以一种很酷的方式实现所需的行为，您将必须以这种方式创建一个角度指令：

var template = '<div data-text="{{$scope.value}}"></div>';
angular.directive('Circful', function() {
  return {
    scope:{
       value : '='
    }
    restrict: 'E',
    template: myTemplate
    link : function(scope,element){
      element.circliful()
    }
  };
});

并像这样使用它：

<div ng-repeat="type in types">
   <div>
       <Circful value="type.value">
   </div>
</div>