Question

我正面临角度js和高图的奇怪问题。

我的代码摘要是这样的：

HTML

<div>
    <div class="row">
        <div ng-repeat="project in ProjList">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                    <div class="module-group">
                        <!--Other block - 1-->

                        <section class="module">
                            <div id="tagID{{project.projName}}"></div>
                        </section>  

                        <!--Other module - 2-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

enter code here

控制器

app.service('myService', function(config, myHighChart, $http, $q) {
    var deferred = $q.defer();

    this.loadJSON = function(file, callback) {
        //Code to read JSON file
    }

    this.displayChart = function(myHighChart, highChartData, projName) {

        myHighChart.buildHighChart(highChartData, projName);

        return true;
    };

app.controller('MyCtrl', [
    'config',
    '$scope',
    '$http',
    '$q',
    '$timeout',
    'myService',
    'myHighChart',
    function(config, $scope, $http, $q, $timeout, myService,
            myHighChart) {
{
                //$scope.ProjList = [ {
                //                    projName: 'Proj1',
                //                    data : 10,        
                //                    }, {
                //                    projName: 'Proj2',
                //                    data : 20,    
                //                    }]; //inside main scope - 1

        myService.loadJSON(fileName, function(response) {
                //There is nothing to do with the Json read here, my plan is to take data from the json file and create dynamic project, but to test I am using sample data

            $scope.ProjList = [ {
                                 projName: 'Proj1',
                                 data : 10,     
                                }, {
                                 projName: 'Proj2',
                                 data : 20, 
                                }];//inside function - 2

            //Prepare highChartData from the ProjList

            //Call HighChart in a loop of ProjList
            for (var i = 0; i < $scope.ProjList.length; i++) {
                console.log("Display chart for: "
                        + $scope.ProjList[i].projName);

                var varname = 'show' + $scope.ProjList[i].projName;

                $scope[varname] = myService.displayChart(
                        myHighChart, highChartData, $scope.ProjList[i].projName);
            }           
     )};
}

highchart

app
    .factory(
            'myHighChart',
            function() {
                return {

                    // function for the charts
                    buildHighChart : function(highChartData, projName) {

                    var options = {};

                        options.chart = {
                            renderTo : 'tagID' + projName,
                            zoomType : 'x',
                            marginBottom : 60,
                        };

                        <!--Other required fields are set-->                        

                        console.log("Render to element with ID : " + options.chart.renderTo);
                        console.log("Number of matching dom elements : " + $("#" + options.chart.renderTo).length);

                        new Highcharts.Chart(options);                                  
                    }

使用上面的代码我正在加载一个具有正确renderTo id的高图表。这给了我，

渲染到ID为0的元素

匹配的dom元素数：tagIDProj1

Highcharts错误＃13

但当我在主要范围内取消评论＆＃34; - ＆＃34;并注释＆＃34;在函数内部 - 2＆＃34;，然后我可以正确加载高图表。

注意：代码的其他部分没有变化

范围有问题吗？我对控制器范围和功能范围一无所知，或者我遗漏了什么。

Answer 1

当HighCharts.js尝试访问DOM中不存在的元素时，会出现错误＃13。我建议检查语句执行流程。你必须在HighCharts寻找它之后动态创建元素。

具有角度js，功能和控制器范围的HightChart Error 13

1 个答案: