AngularJS выводя Javascript в директиве

Question

Привет хороших людей переполнения стека ..

Я пытаюсь сделать директиву в угловом, который выводит JavaScript, что я буду использовать, чтобы нарисовать диаграмму Морриса. До сих пор мне было тяжело. Вот код:

площадь-chart.js:

angular.module('areaChart', ['ui.bootstrap']).directive('areaChart', function() { 
var directive = {}; 
directive.templateUrl = directivePath + '/charts/area-chart.html'; 
directive.restrict = 'EA'; 
directive.scope = { 
    dealership: "=", 
    chartdata: "=" 
}; 

directive.controller = function($scope) { 
    $scope.ykeys = function() { 
     var ykeys = []; 
     angular.forEach($scope.chartData, function(d,k) { 
      if(k != 'period') { ykeys.push(k); } 
     }); 
     return "'" + ykeys.join("','") + "'"; 
    } 
} 

return directive; 
}); 

И зонная chart.html

<script> 
Morris.Area({ 
    element: 'area-chart-fuckyou', 
    xkey: 'period', 
    ykeys: [{{ ykeys }}], 
    labels: [{{ ykeys }}], 
    hideHover: 'auto', 
    pointSize: 2, 
    resize: true, 
    data: 'fuckyou' 
}); 
</script> 

я получаю неожиданный маркер '{' ошибка в любое время я пытаюсь использовать угловая подстановка в выведенном javascript. Итак, когда я пытаюсь ввести {{ykeys}}, он выдает ошибку. Я попытался изменить {{ykeys}}, чтобы включить полную строку, которую я хотел бы там, IE, имея ее обратно ['key1','key2'] и все их комбинации. Наверное, я не понимаю, что такое порядок операций для углового. Кто-нибудь может мне помочь?

Answer 1

Вам нужно добавить link функции, которая будет делать инициализацию диаграммы

directive.link = function(scope, element, attrs){ 
    new Morris.Area({ 
     element: element, //here you can attach direct element 
     data: scope.data, 
     ykey: scope.ykeys() 
     labels: scope.ykeys(), 
     hideHover: 'auto', 
     pointSize: 2, 
     resize: true, 
     data: 'fuckyou' 

    }); 
}