ng-repeat中的AngularJS指令

Question

I'm trying to use Angular's ng-repeat to display jQuery sparklines. I've wrapped the sparkline in what the angular directive to tell it to call. It seems that despite having a postlink in there it still is call the sparklines too early. I've attached my code below:

var Timeline = angular.module('Timeline', []);
  Timeline.directive('sparkline', function () {
    return {
    restrict: 'E', 
    scope: { 
      val: '=',
    },
        link: function postLink(scope, iElement, attrs) {
      scope.$watch('scalars', function (newVal, oldVal) {
    $(iElement).sparkline('html', { 
           type:'bar', barColor:'#1e42c8', height:'40px', barWidth:10 , barSpacing:2
        });
      });
    }
  };
});

HTML

<div class="row" ngChange:false ng-repeat="(description,scalars) in vitals | orderBy:orderProp">
  <div class="span4">
    <p><sparkline exp="data" class="sparkline">{{scalars.join(',')}}</sparkline></p>
  </div>
</div>

Answer 1

For anyone bouncing into this question: For a working sparklines directive, I suggest you check this fiddle out: http://jsfiddle.net/m48u/h8PdR/15/ ( not by me ). The directive itself looks like so -

myapp.directive("bulletcharksparkline", function() {
return {
    restrict:"E",
    scope:{
        data:"@"
    },
    //template: "<div class='tpl'></div>",
    compile: function(tElement,tAttrs,transclude){
        tElement.replaceWith("<span>"+tAttrs.data+"</span>");
        return function(scope, element, attrs){
            attrs.$observe("data", function(newValue){
                element.html(newValue);
                element.sparkline('html',{type:'bullet'});
            });
        };
    }
};
});