Question

我正在尝试制作一个饼图指令，我使用的是highcharts，但我还想添加另一行文本，例如＆＃39; 60％＆＃39;或者。到目前为止我试过这个

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的引用是隐式的。

在带有范围值的指令中附加html

1 个答案: