Question

我正在尝试使用Angular的ng-repeat来显示jQuery迷你图。我已将迷你线包裹在角度指令中，以告诉它。似乎尽管在那里有一个postlink，它仍然是过早地调用迷你图。我在下面附上了我的代码：

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

对于任何人反复提出这个问题：对于一个有效的迷你版指令，我建议你检查一下：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'});
            });
        };
    }
};
});

ng-repeat中的AngularJS指令

1 个答案: