javascript - AngularJS 在指令中输出 Javascript

Question

堆栈溢出的好心人大家好..

我正在尝试在 Angular 中创建一个指令，输出 javascript，我将用它来绘制莫里斯图。到目前为止我一直过得很艰难。代码如下:

面积图.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;
});

还有，area-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 中使用 Angular 替换时，都会收到意外的标记“{”错误。因此，当我尝试注入(inject) {{ykeys}} 时，它会抛出错误。我尝试更改 {{ykeys}} 以包含我想要在 IE 中返回的完整字符串 ['key1','key2'] 和其所有组合。我想我不明白 Angular 操作顺序是什么。有人可以帮助我吗？

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' 

  });
}