CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Pacuraru Daniel
Pacuraru Daniel

Reputation: 1205

append html inside directive with scope values

i am trying to make a pie chart directive and i use the highcharts one but i also want to add another line of text that sais for example '60%' or so. So far i tried this 

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

but this issue is that the last that i applied, sais only % instead the value and percent symbol. Is there something wrong i did on the compile stuff on the end ?

Thank you in advance, Daniel!

Upvotes: 0

Views: 74

Answers (1)

Sycomor
Sycomor

Reputation: 1272

Either use {{value}} or write your element as '<span class="pie-graph-value">' + scope.value + '<sup>%</sup></span>' (note the latter will not update later since the value is only calculated once when appending the element). This element will be rendered so the reference to scope is implicit.

Upvotes: 1

Related Questions