javascript - 在指令内附加 html 和范围值

Question

我正在尝试制作一个饼图指令，并且使用 highcharts，但我还想添加另一行文本，例如“60%”左右。到目前为止我尝试过这个

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

但这个问题是我应用的最后一个，仅表示％而不是值和百分比符号。我最后的编译有什么问题吗？

预先感谢您，丹尼尔!

Answer 1

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