jQuery Sparkline в ячейке в ng-grid с использованием CellTemplate и директивы

Я пытаюсь вывести jQuery Sparkline в каждую строку в одной ячейке в ng-grid. Столбец содержит данные числового массива.

Plunkr --> http://plnkr.co/edit/1eNEcx6FQWcJynlVYvFw?p=preview

Для этого я использую директиву с шаблоном ячейки.

Шаблон ячейки:

Директива:

app.directive('ngAge', function() {
  return{
    restrict: 'C',
    replace: true,
    translude: true,
    scope: {ngAgeData: '@'},
    template: '<div>' +
              '<div class="sparklines"></div>' +
                '</div>',
    link: function(scope,element,attrs){
     // var arrvalue= "3386.24000,1107.04000,3418.80000,3353.68000,4232.80000,3874.64000,3483.92000,2735.04000,2474.56000,3288.56000,4395.60000,1107.04000";
     //console.log(attrs.ngAgeData);
     var arrvalue = attrs.ngAgeData;
     var myvalues = new Array();
     myvalues = arrvalue.split(",");
     $('.sparklines').sparkline(myvalues); 

    }
  }
});

У меня возникли трудности с получением значения attrs.ngAgeData внутри функции ссылки. Я не уверен, что мне не хватает. Пожалуйста помоги!!!

Спасибо


angularjs sparklines directive celltemplate ng-grid
person inthiyan    schedule 10.08.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Используйте этот шаблон ячейки:

cellTemplate: '<div age-line agedata=row.entity.age></div>'

Обратите внимание, что значения передаются как атрибуты.

Директива должна быть:

app.directive('ageLine', function () {
    return {
        restrict: 'A',
        scope: { agedata: '=' },
        link: function (scope, elem) {
            scope.$watch('agedata', function (newval) {
                elem.sparkline(scope.agedata);
            });
        }
    };
});

Также обратите внимание, что вам не нужен $., поскольку элемент уже является объектом jquery (lite).

Вот рабочий планкер: http://plnkr.co/edit/oDbPp9DGFCGGZF30Bzsi?p=preview

person mainguy    schedule 27.09.2013