1

我正在尝试使用 Angular 的 ng-repeat 来显示 jQuery 迷你图。我已经将迷你图包装在 angular 指令中以告诉它调用。似乎尽管在那里有一个帖子链接，但仍然为时过早调用迷你图。我在下面附上了我的代码：

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>
4

1 回答 1

5

对于任何跳入这个问题的人：对于一个有效的迷你图指令，我建议你检查这个小提琴：http: //jsfiddle.net/m48u/h8PdR/15/（不是我）。该指令本身看起来像这样 -

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'});
            });
        };
    }
};
});
于 2013-01-31T15:42:07.140 回答