Question

当我使用jQuery（无角度）测试圆环图时，我的图表效果很好（See my plunker）。但是，当我把它放在角度指令中时，什么都没有出现。我在这里使用templateUrl，因为实际的模板要复杂得多。

index.html

<body ng-app="myApp">
  <div my-chart></div>
</body>

的Javascript

angular.module('myApp', [])
  .directive('myChart', function() {
    return {
        restrict: 'A',
        replace: 'true',
        templateUrl: 'my-chart.html',
        scope: {},
        link: function (scope, element) {

            var chart1 = new Highcharts.Chart({
                chart: {
                    renderTo: 'chart_1',
                    type: 'pie',
                    height: 200,
                },
                colors: ['#FF0F00', '#FBAF34', '#00cc00'],
                title: {
                    text: ''
                },
                exporting: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                tooltip: {
                    //enabled: false,
                    headerFormat: '<b>{series.name}</b><br><table>',
                    pointFormat: '<tr><td style="color:{point-color}">{point.name}: </td>' + '<td style="text-align: right">{point.y} %</td></tr>',
                    footerFormat: '</table>'
                },
                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        allowPointSelect: true,
                        point: {
                            events: {
                                click: function () {
                                    alert('Site name: ' + this.series.name + ', severity: ' + this.name + " value: " + this.y);
                                }
                            }
                        }
                    },
                    pie: {
                        innerSize: 120,
                        // disable data label
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: "Site 1",
                    data: [
                        {name: "Critical", y: 56.33},
                        {name: "Warning", y: 24.03},
                        {name: "Ok", y: 10.38}
                    ]
                }]
            });
        }
    };
  });

我-chart.html

<div id="chart_1"></div>

Answer 1

我查看了你的代码，一切看起来都很合理。你没有提供最新代码（带指令）的plunker，所以我为你创建了一个！我想你没有添加JQuery脚本，因为Angular有一些内置。因为它目前还不完美，有些项目被遗漏，HighChart需要一些额外的部分。具体要求我不确定。控制台日志显示多个错误，而不添加JQuery。希望Angular中JQuery缺少的项目很快就会添加！

http://plnkr.co/edit/u6I1zr?p=preview

<html ng-app="myApp">

<body>
  <div my-chart></div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/highcharts-more.js"></script>
  <script src="script.js"></script>
</body>

</html>

Answer 2

Angularjs使用JQuery的子集，称为“jQuery lite”或“jqLite”.jqLite仅实现最常用的功能，因此如果您需要增强功能，则需要在angularjs之前加载jquery库

下面是文档的链接： -

https://docs.angularjs.org/api/ng/function/angular.element

Angularjs - 指令

2 个答案: