谷歌圖表：重複調用角js

Question

我有一個Web應用程序分爲兩部分，一部分是公開的，另一部分是私人的。公開部分與谷歌圖表正常工作，但私人部分工作不正確，因爲重複調用其他功能。

爲了表示圖表圖形我已經定義的下一個指令：

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應用程序的公共和私人部分的每個部分分別有自己的模塊， 「publicProfileModule」 和 「privateProfileModule」。

Answer 1

你只想引導一次AngularJS。這可以通過使用ng-app="myAppModuleName"指令或手動呼叫angular.bootstrap(rootElem, ['myAppModuleName'])來完成。

如果你們兩個都這樣做了，AngularJS就會自我抗爭。刪除其中一個。