Circliful插件不能在ng重複工作

我試圖用circliful（一個jquery插件https://longren.io/circliful-a-jquery-plugin-providing-animated-progress-circles/）在ng重複中創建一堆圖。但它不起作用。在ng重複使用時，circliful不起作用。Circliful插件不能在ng重複工作

<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>

任何幫助將不勝感激。謝謝！

來源

2015-11-06 Sai

我通過使用指令作爲屬性並使用指令觸發元素上的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); 
    } 
}; 
});

超時是爲了讓設置值之前圖表不繪製。

來源

2015-11-07 01:03:59 Sai

首先，您將擁有多個具有相同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>

來源

2015-11-06 01:25:12

這似乎喂不渲染計，我不打任何錯誤，但它不工作。我是否必須在模板中指定任何內容？另外我想記錄我的指令中的值，它似乎是控制不會去指令。 – Sai

好吧，現在量表正在呈現，但是當我嘗試設置像你所顯示的值。我收到這個錯誤：[link]（https://docs.angularjs.org/error/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Btype.value%7D%7D&p4= ％7Btype.value％7D％7D） – Sai

嘗試 –

我嘗試了以上回答，並以此標記結束。

這是我的指令

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-重複的樣子

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

來源

2016-05-02 09:09:03 cescgie

Circliful插件不能在ng重複工作

回答

相關問題