jQuery 迷你图条形图不适用于 Angularjs ng-repeat

Question

我正在尝试使用 jquery.sparkline.js 在我的 html table 上显示条形图。但是当我使用 ng-repeat 时，我的迷你图不起作用。

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

当您查看 ng-repeat 时，它只是一个虚拟数据，但在我使用 ng-repeat 之后，我的迷你图不会呈现。我想要这个选项的原因是我有一个 html table 不同的行有不同的数据所以我需要在 table 列之一中的条形图。

这里是 plunker:

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

如果我们删除 ng-repeat 并显示条形图，则 plunker 会工作

如何使用 ng-repeat 完成这项工作并绑定条形图？

Answer 1

你永远不应该在 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

jQuery 迷你图条形图不适用于 Angularjs ng-repeat

jQuery Sparkline bar chart not working on Angularjs ng-repeat

sparklines

angularjs