Гистограмма jQuery Sparkline не работает на Angularjs ng-repeat

Я пытаюсь использовать 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-repeat, это не что иное, как фиктивные данные, но после того, как я использую ng-repeat, моя искра не отображается. Причина, по которой я хочу эту опцию, заключается в том, что у меня есть html-таблица с разными строками и разными данными, поэтому мне нужна гистограмма в одном из столбцов таблицы.

Вот плунжер:

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

Плункер работает, если мы удалим ng-repeat и появится гистограмма

Как я могу заставить это работать с помощью ng-repeat и привязать гистограмму?


angularjs sparklines
person VR1256    schedule 05.07.2016    source источник
comment
Конечно, это не работает. Вы пытались понять, как работает Angular и почему вы не должны просто инициализировать плагины jQuery в контроллере, как вы пытаетесь?   -  person dfsq    schedule 05.07.2016
comment
Спасибо за ответ @dfsq, но как мне это исправить сейчас?   -  person VR1256    schedule 05.07.2016
comment
Вам нужно создать директиву. В любом случае, проверьте ответ, который я опубликовал.   -  person dfsq    schedule 05.07.2016

Ответы (1)


arrow_upward
5
arrow_downward

Вы никогда не должны инициализировать плагины jQuery в контроллерах Angular просто потому, что не гарантируется, что 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

person dfsq    schedule 05.07.2016
comment
Я пытаюсь связать гистограмму спарклайна с пользовательской директивой Angular 2, но получаю сообщение об ошибке, спарклайн не является функцией. Ниже приведен плункер: plnkr.co/edit/BpY6Kd1bSMzWTKSZqJzv?p=preview - person VR1256; 11.07.2016
comment
Потому что на узлах DOM такого метода нет. - person dfsq; 11.07.2016