Google-Diagramm: doppelte Aufrufe in angular js

Question

Ich habe eine Web-Anwendung in zwei Teile geteilt, ein Teil ist öffentlich und der andere Teil ist privat. Der öffentliche Teil funktioniert gut mit Google Charts, aber der private Teil funktioniert falsch, da Aufrufe an andere Funktionen doppelt ausgeführt werden.

Um Chart Grafiken vertrete ich die nächste Richtlinie definiert haben:

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)); 
      } 
     } 
    }; 
}); 

Und im Layout, ich habe diesen Code hinzugefügt, die im öffentlichen Teil gut funktioniert und macht mich zweimal anrufen funktioniert, wenn ich Seite laden oder Feuer jedes Ereignisses:

Sie können auf dem nächsten Bild die doppelten Aufrufe an die Funktionen und den endgültigen Fehler überprüfen, die ich bekomme.

Ich habe keine Ahnung, warum dies geschehen ist.

Edit 1:

Jeder Teil der öffentlichen Web-Anwendung und privaten Teil haben ihr eigenes Modul "publicProfileModule" und "privateProfileModule" bezeichnet.

Answer 1

Sie möchten AngularJS nur einmal starten. Dies wird entweder mit der Direktive ng-app="myAppModuleName" oder manuell durch Aufruf von angular.bootstrap(rootElem, ['myAppModuleName']) erreicht.

Wenn Sie beides tun, kämpft AngularJS sich. Entferne einen von ihnen.