Question

我有一个Web应用程序分为两部分，一部分是公共部分，另一部分是私有部分。公共部分适用于Google Charts，但私有部分工作错误，因为重复调用其他函数。

为了表示图表图形，我已经定义了下一个指令：

privateApp.directive("columnChart", function(){
    return{
        restrict: "A",
        scope: {
            titleChart: "=",
            data: "=",
            columns: "=",
            min: "=",
            max: "=",
            vAxisTitle: "=",
            hAxisTitle: "=",
            tooltipColumn: "=",
            isClicked: "=",
            callbackFn: "&",
            width: "=",
            height: "="
        },
        link: function(scope, $elm, $attr){     
            var data = new google.visualization.DataTable();
            //Definimos las columnas que va a tener nuestra tabla de datos
            for (var i = 0; i < scope.columns.length; i++){
                data.addColumn(scope.columns[i].tipo, scope.columns[i].nombreColumna);
            };          

            var widthChart = 400;
            var heightChart = 400;
            if (scope.width != null)
                widthChart = scope.width;
            if (scope.height != null)
                heightChart = scope.height;

            scope.$watch("data", function (newValue, oldValue){
                scope.options = {
                        width: widthChart,
                        height: heightChart,
                        bar: {groupWidth: "95%"},
                        title: scope.titleChart,
                        legend: {position: "none"},
                        annotations: {
                            alwaysOutside: true
                        },
                        chartArea : {left:50,top:50,width:'90%',height:'80%'},
                        vAxis: {title: scope.vAxisTitle},
                        hAxis:  {title: scope.hAxisTitle, textPosition: "out"}
                };      
                if (scope.data != null){
                    //Eliminamos datos del DataTable
                    data.removeRows(0, data.getNumberOfRows());                 
                    //Insertamos filas a la tabla
                    for (var i = scope.min; i <= scope.max; i++){
                        data.addRow(scope.data[i]);
                    };


                    var view = new google.visualization.DataView(data);
/*                  var cols = new Array();
                    for (var i = 0; i < scope.columns.length; i++){
                        if (i <= 1){
                            cols.push(i);
                            if (i == 1){
                                cols.push({calc: 'stringify', sourceColumn: 1, type: 'string', role: 'annotation'});
                            }
                        }else if (i == 2){
                            cols.push({calc: 'stringify', sourceColumn: 2, type: 'string', role: 'annotationText'});
                        }
                    }
                    for (var i = 0; i < cols.length; i++){
                        console.log(cols[i]);
                    }*/
                    //view.setColumns(cols);
                    view.setColumns([0, 1,
                                        {
                                            calc: "stringify",
                                            sourceColumn: 1,
                                            type: "string",
                                            role: "annotation"
                                        },
                                        {
                                            calc: "stringify",
                                            sourceColumn: scope.tooltipColumn,
                                            type: "string",
                                            role: "tooltip"
                                        }]);

                    var chart = new google.visualization.ColumnChart($elm[0]);
                    //chart.draw(data, scope.options);
                    chart.draw(view, scope.options);
                    if (scope.isClicked){
                        //Detectamos el clic sobre el gráfico
                        google.visualization.events.addListener(chart, "click", selectHandler);                     
                    }                               
                }
            });

            scope.$watch("min", function (newValue, oldValue){
                scope.options = {
                        width: 400,
                        height: 400,
                        bar: {groupWidth: "95%"},
                        title: scope.titleChart,
                        legend: {position: "none"},
                        annotations: {
                            alwaysOutside: true
                        },
                        chartArea : {left:50,top:50,width:'90%',height:'80%'},
                        vAxis: {title: scope.vAxisTitle},
                        hAxis:  {title: scope.hAxisTitle, textPosition: "out"}
                };
                if (scope.data != null){
                    //Eliminamos datos del DataTable
                    data.removeRows(0, data.getNumberOfRows());
                    //Insertamos nuevos datos en la tabla
                    for (var i = scope.min; i <= scope.max; i++){
                        data.addRow(scope.data[i]);
                    };
                    var view = new google.visualization.DataView(data);
                    view.setColumns([0, 1,
                                        {
                                            calc: "stringify",
                                            sourceColumn: 1,
                                            type: "string",
                                            role: "annotation"
                                        },
                                        {
                                            calc: "stringify",
                                            sourceColumn: scope.tooltipColumn,
                                            type: "string",
                                            role: "tooltip"
                                        }]);

                    var chart = new google.visualization.ColumnChart($elm[0]);
                    chart.draw(view, scope.options);
                    if (scope.isClicked){
                        //Detectamos el clic sobre el gráfico
                        google.visualization.events.addListener(chart, "click", selectHandler);
                    }                               
                }
            });
            function selectHandler(e){
                var index;

                index = parseInt(e.targetID.substring("bar#0#".length, e.targetID.length));
                scope.callbackFn({arg1: data.getValue(index, 4)});
                //alert(data.getValue(index, 4));
            }
        }
    };
});

在布局中，我添加了这个在公共部分工作正常的代码，当我加载页面或触发任何事件时，我会调用两次函数：

<script type = "text/javascript">
    google.charts.setOnLoadCallback(function(){
        angular.bootstrap(document.body, ["privateProfileModule"]);
    });
    google.charts.load("current", {packages: ["corechart"]});
</script>

您可以在下一张图片上查看对函数的重复调用以及我得到的最终错误。

我不知道为什么会发生这种情况。

修改1：

Web应用程序公共和私有部分的每个部分都有自己的模块，＆＃34; publicProfileModule＆＃34;和＆＃34; privateProfileModule＆＃34;分别

Answer 1

你只想引导一次AngularJS。这可以通过使用ng-app="myAppModuleName"指令或手动调用angular.bootstrap(rootElem, ['myAppModuleName'])来完成。

如果你同时做这两件事，AngularJS正在为自己而战。删除其中一个。

Google图表：以角度js重复调用

1 个答案: