Question

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

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

当你看看ng-重复它只是一个虚拟数据，但在我使用ng-repeat之后我的迷你线不会渲染。我想要这个选项的原因是我有一个html表，不同的行有不同的数据，所以我需要在一个表列中的条形图。

以下是摘要：

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 Sparkline条形图不适用于Angularjs ng-repeat

1 个答案: