angularjs - jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive -

i trying bring jquery sparkline @ each row in 1 cell in ng-grid. column contains numeric array data.

plunkr --> http://plnkr.co/edit/1enecx6fqwcjynlvyvfw?p=preview

i using directive cell template achieve this.

cell template:

directive:

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);       }   } }); 

i having difficulty in getting attrs.ngagedata value inside link function. not sure missing. please help!!!

thanks

use celltemplate:

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

note values passed attributes.

the directive should be:

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

also note dont need $., since element jquery(lite) object.

here working plunker: http://plnkr.co/edit/odbpp9dgfcggzf30bzsi?p=preview