jQuery Sparkline條形圖不能在Angularjs ng-repeat上工作

我想用jquery.sparkline.js在我的html表格上顯示條形圖。但是當我使用ng時，重複我的迷你曲線不起作用。jQuery Sparkline條形圖不能在Angularjs ng-repeat上工作

<tr ng-repeat='x in [1]'> 
    <td>{{x}}</td> 
    <td>33</td> 
    <td> 
     <span class="dynamicbar">Loading..</span> 
    </td> 
</tr>

當U看NG-重複其不過是一個虛擬數據，但之後我用NG-重複我的火花不會呈現。我想要這個選項的原因是我有一個不同行的html表有不同的數據，所以我需要在表列中的一個條形圖。

這裏是plunker：

http://plnkr.co/edit/MQ0JFg75RvfKKFiATz84?p=preview

的plunker工作，如果我們刪除NG重複和條形圖顯示了

有人能幫助使用NG-重複，使這項工作，並綁定條形圖。

來源

2016-07-05 Vijender Reddy Chintalapudi

當然這是行不通的。您是否嘗試瞭解Angular是如何工作的以及爲什麼您不應該像在嘗試一樣初始化控制器中的jQuery插件？ – dfsq

感謝回覆@dfsq，但我現在應該如何解決這個問題？ –

您需要創建一個指令。無論如何，檢查我發佈的答案。 – dfsq

你不應該在Angular控制器中初始化jQuery插件，因爲它不保證你之後的HTML元素將出現在DOM中（由於編譯和渲染）。相反，創建簡單的指令：

app.directive('dynamicbar', function() { 
    return { 
    scope: { 
     data: '=' 
    }, 
    link: function(scope, element) { 
     element.sparkline(scope.data, { 
     type: 'bar', 
     barColor: 'green', 
     width: 300, 
     height: '50', 
     barWidth: 8, 
     barSpacing: 3, 
     colorMap: ["green", "yellow", "red"], 
     chartRangeMin: 0 
     }); 
    } 
    } 
})

，並在模板中使用它：

<tr ng-repeat='x in items'> 
    <td>22</td> 
    <td>33</td> 
    <td> 
     <span dynamicbar data="x.bars">Loading...</span> 
    </td> 
</tr>

演示：http://plnkr.co/edit/6wO6zKcRYdtrN6Xmbj9E?p=preview

來源

2016-07-05 18:38:40 dfsq

非常感謝dfsq。 –

很高興幫助，隨時接受答案。 – dfsq

我想綁定與Angular 2自定義指令的sparkline條形圖，但我得到錯誤，sparkline不是一個函數。下面是plunker：http://plnkr.co/edit/BpY6Kd1bSMzWTKSZqJzv?p=preview –

jQuery Sparkline條形圖不能在Angularjs ng-repeat上工作

回答

相關問題