在指令中附加HTML与范围值

我正在尝试制作饼图指令，并且我使用了高图，但我也想添加另一行文本，例如'60％'左右。到目前为止，我试过这个在指令中附加HTML与范围值

app.directive('pieGraph', function($compile) { 
    return { 
    restrict: 'C', 
    scope: { 
     value: '@', 
     color: '@' 
    }, 
    link: function(scope, elem) { 
     elem.highcharts({ 
     chart: { 
      type: 'pie', 
      backgroundColor: null 
     }, 
     title: { 
      text: null 
     }, 
     yAxis: { 
      title: { 
      text: 'Total percent market share' 
      } 
     }, 
     plotOptions: { 
      pie: { 
      shadow: true 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     credits: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     tooltip: { 
      enabled: false 
     }, 
     series: [{ 
      name: '', 
      data: [ 
      { 
       name: 'a', 
       y: parseInt(scope.value, 10), 
       color: scope.color 
      }, 
      { 
       name: 'b', 
       y: (100 - parseInt(scope.value, 10)), 
       color: '#ffffff' 
      } 
      ], 
      size: '100%', 
      innerSize: '90%', 
      dataLabels: { 
      enabled: false 
      } 
     }] 
     }); 

     var graph = angular.element('<span class="pie-graph-value">{{scope.value}}<sup>%</sup></span>'); 
     $compile(graph)(scope); 
     elem.append(graph); 
    } 
    }; 
});

但这个问题是，我申请的最后一个，只有％，而不是价值和百分比符号。我在编译过程中遇到了什么问题？

先谢谢你了，丹尼尔！

来源

2014-10-02 Pacuraru Daniel

请使用{{value}}或将您的元素编写为'<span class="pie-graph-value">' + scope.value + '<sup>%</sup></span>'（注意后者不会稍后更新，因为该值仅在追加元素时计算一次）。该元素将被渲染，因此对scope的引用是隐式的。

来源

2014-10-02 14:59:18 Sycomor

哦，我的上帝的男人，我不能相信我写了范围内的HTML :)谢谢你这么多的队友，这个答案帮助我很多！ – 2014-10-02 16:07:54

在指令中附加HTML与范围值

回答

相关问题