AngularJS 在指令中输出 Javascript

Question

嗨，堆栈溢出的好人..

我正在尝试在 angular 中创建一个输出 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 中使用 angular 替换时，我都会收到意外标记“{”错误。因此，在我尝试注入 {{ykeys}} 的地方会抛出错误。我已经尝试更改 {{ykeys}} 以在 IE 中包含我想要的完整字符串 return ['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' 

  });
}

AngularJS 在指令中输出 Javascript

AngularJS outputting Javascript in a directive

javascript

angularjs

morris.js

angularjs-directive