append html inside directive with scope values

Question

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!

Sycomor · Accepted Answer · 2014-10-02 14:59:18Z

1

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.

answered Oct 2, 2014 at 14:59

Sycomor

1,27211 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pacuraru Daniel Over a year ago

oh my god man, i can't believe i wrote scope inside the html :) thank you so much mate, this answer helped me ALOT !

Collectives™ on Stack Overflow

append html inside directive with scope values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related