javascript - angularJS 指令中的 Highchart

Question

我在 angularJS 指令中包装了一个 Highcharts ，我正在尝试添加一个应该显示在图表下方的按钮。问题是按钮不存在。

HTML:

<div id="container" my-chart style="height: 400px; margin-top: 1em"></div>

JS:

var app = angular.module('app', []);
app.directive('myChart', function () {
    return {
        restrict: 'A',
        replace: true,

        template: '<div><div id="chart"></div><div><button id="btn">Click</button></div><div>',
        link: function (scope, elem, attrs) {
            elem.highcharts({
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },

                series: [{
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }]

            });
        }
    }
});

请看这个JsFiddle例如。

更新:这是固定的 JsFiddle实现答案后。

Answer 1

这是因为您在元素上调用 .highcharts() 所以它会删除内部的所有内容并在内部呈现图表。尝试使用这样的模板:

<div>
    <div id="chart"></div>
    <div><button id="btn">Click</button></div>
</div>

然后在您的指令链接函数调用中:

$("#chart").highcharts({})

除了这个 id 选择器你可以使用任何你想要的选择器。您可以放置​​类，然后使用类图在元素子元素上调用它，例如:

$(elem).children(".chart").highcharts({...