Question

我正在尝试使用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>

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

Answer 1

首先，您将拥有多个ID属性，其ID为#myStat且错误。

其次，你必须拨打$（＆＃39;＃myStat＆＃39;）。circliful（）;在AngularJS渲染你的div＃myStat ..

之后

要以一种很酷的方式实现想要的行为，你必须以这种方式创建一个角度指令：

＆＃13;

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

＆＃13;

并使用它：

＆＃13;

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

＆＃13;

Answer 2

我通过使用指令作为属性并使用指令触发元素上的circliful函数来解决这个问题。

这是我的标记

<div ng-repeat="type in types">
 <div data-text="{{type.value}}" data-type="half" chart></div>
</div>

这是我的指示

app.directive('chart', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element) {
        $timeout(function () {
            element.circliful()
        }, 100);
    }
};
});

超时是为了在设置值之前不绘制图表。

Answer 3

我尝试了上面的回答，最后得到了这个标记。

这是我的指示

var myTemplate = '<div data-text="{{$scope.value}}"></div>';
var percentage = {};

angular.module('MyApp')
.directive('circful', function() {
    return {
      scope:{
         value : '='
      },
      restrict: 'E',
      template: myTemplate,
      link : function(scope,element){
        percentage.animationStep = 5;
        percentage.foregroundColor = '#ff6600';
        percentage.backgroundColor = '#eceaeb';
        percentage.fontColor = '#2A3440';
        percentage.foregroundBorderWidth = 35;
        percentage.backgroundBorderWidth = 35;
        percentage.pointSize = 100;
        percentage.percent = scope.value;
        element.circliful(percentage);
      }
    };
  });

这就是我的ng-repeat的样子

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

Circliful插件不能在ng重复内部工作

3 个答案: