Angularjs：无法动态生成基于 c3 指令的图表

Question

我正在尝试使用 c3 图表指令动态创建 c3 图表。 C3 图表指令工作正常。但是，单击按钮后动态图表创建不起作用。任何人都可以建议我哪里出错了吗？请在 http://plnkr.co/edit/wWJx3zU3Sm1cN9ZCtvoh?p=preview

找到我的 plunker

我正在编译我的 c3 指令，如下所示：

 $scope[chartName] = {

    data: {
        x: 'x',
        columns: [["x","2014-02-01","2014-03-01","2014-04-01","2014-05-01","2014-06-01","2014-07-01","2014-08-01","2014-09-01"],["LH",".00",".00",".00",".00",".00",".00",".00","31.50"],["DW","42.57",".00",".00","321.14","1070.06","6501.42","144337.85","329159.85"],["PS",".00","82.22","-2.87","179.60","835.85","6925.52","479631.24","1386751.16"]],
        type: 'line'
    },
    axis: {
        x: {
            type: "timeseries",
            tick: {
                format: "%d-%m-%Y"
            }
        }
    },
    subchart: {
        show: true
    }

};

   var  template = ' <div class="col"> <p class="graphtitle">' + dashletterName + ' </p> <c3-simple id = "' + chartName + '" config="' + chartName + '"></c3-simple> </div>';
     angular.element(document.body).append($compile(template)($scope));

Answer 1

我下载了你的 Plnkr 并在浏览器中试了一下。这是来自 Chrome 控制台的错误：

ReferenceError: $compile is not defined

这意味着 AngularJS 不能使用 $compile，因为它没有被注入到你的控制器中。这应该在 controllers.js 中完成，如下所示：

// I have added $compile
controller('DemoCtrl', ['$scope', 'c3SimpleService', '$compile', function ($scope, c3SimpleService, $compile)
{
  // rest of the controller code
}

我也修复了你的 Plnkr。希望对您有所帮助:)

Angularjs：无法动态生成基于 c3 指令的图表

Angularjs : failing to generate c3 directive based charts dynamically

angularjs

angularjs-directive

angularjs-compile

c3.js