javascript - 使用 requirejs 在 angularjs 中使用 Highcharts 时出错。自定义指令抛出错误

Question

我正在尝试在使用 angularjs 1.3.15 构建的 PWA 应用程序中包含 highcharts 我在 bower.json 中声明了 highcharts

我的应用配置（包含需要配置）如下所示：

require.config({ paths: { "angular": "lib/angular/angular.min", "Q": "lib/q/q", .. "angular-my-highcharts": "lib/mydirectives/src/my.highcharts/my.highcharts" "highcharts": "lib/highcharts/highcharts" } shim: { 'angular': { exports: 'angular' }, 'highcharts': { exports: 'highcharts' } 'angular-my-highcharts': { deps: ['highcharts'] } });

我正在尝试为 highcharts 创建一个自定义指令。我正在使用可以在此博客https://www.highcharts.com/blog/tutorials/194-using-highcharts-with-angular-js/中找到的示例代码。

var highchartsModule = angular.module('my.highcharts', []);
highchartsModule.controller('HighchartsController', ['$scope',
function($scope) {
    $scope.chartOptions = {
        title: {
            text: 'Temperature data'
        },
        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]
        }]
    };
}]);

highchartsModule.directive('hcChart', function () {
return {
    restrict: 'E',
    template: '<div></div>',
    scope: {
        options: '='
    },
    link: function (scope, element) {
        Highcharts.chart(element[0], scope.options);
    }
};
});

我在 app.js 中包含了 my.highcharts 模块

 app = angular.module('MYAPP', ["ngRoute","my.weekselector" ....... "my.highcharts"])

最后我在我的html中加入了以下内容

 <div>
    <hc-chart options="chartOptions">Placeholder for generic chart</hc-chart>
 </div>

但是我在运行应用程序时遇到了这个错误

angular.min.js?_sw-precache=ca1a58818682c3e858a9beb:102 

ReferenceError: Highcharts is not defined
at link (http://localhost/js/lib/my-directives/src/my.highcharts/my.highcharts.js:28:13)

标签： javascriptangularjshighchartsangularjs-directiverequirejs