動態角度圖

Question

我試圖從userTemplate對象創建一個動態圖表。 我正在使用這個指令angular-flot，我想動態地創建指令的數據集和選項。 它的工作，但我有這個錯誤

Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.21/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…ection%5C%22%3A%7B%5C%22color%5C%22%3A%5C%22%2354728c%5C%22%7D%7D%22%5D%5D 
    at Error (native) 
    at http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:6:450 
    at k.$get.k.$digest (http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:110:66) 
    at k.$get.k.$apply (http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:112:173) 
    at http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:122:253 
    at e (http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:37:440) 
    at http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:41:120 

HTML

<div ng-repeat="panel in row.panels" class="{{panel.columnClass}}" resizable id="{{panel.id}}" r-directions="['right']"> 
    <flot dataset="getDataForChart(panel)" options="getOptionForChart(panel)" height="{{panel.graph.height}}"></flot> 
</div> 

控制器

$scope.userTemplate = [ 
         { 
          blockId: 'blockUno', 
          title: 'Block title', 
          rows: [ 
           { 
            rowId: 'rowUno', 
            title: 'Row Title 1', 
            panels: [ 
             { 
              id: 'palel-report-1', 
              title: 'uno', 
              columnClass: 'col-md-4', 
              graph: { 
               height: 250, 
               type: "BAR", 
               countBy: "status" 
              } 
             }, 
             { 
              id: 'palel-report-2', 
              title: 'due', 
              columnClass: 'col-md-4', 
              graph: { 
               height: 250, 
               type: "PIE", 
               countBy: "status" 
              } 
             }, 
             { 
              id: 'palel-report-3', 
              title: 'tre', 
              columnClass: 'col-md-4', 
              graph: { 
               height: 250, 
               type: "BAR", 
               countBy: "status" 
              } 
             } 
            ] 
           } 
          ], 
          tables: [] 
         } 
    ]; 

    $scope.getDataForChart = function(panel) { 
     var graphData = []; 
     var countBy = panel.graph.countBy; 
     var arr = $scope.reportingData; 
     for (var i = 0; i < arr.length; i++) { 
      var valueOfkey = arr[i][countBy]; 
      graphData.push(valueOfkey); 
     } 
     var a = [], b = [], prev; 
     graphData.sort(); 
     for (var i = 0; i < graphData.length; i++) { 
      if (graphData[i] !== prev) { 
       a.push(graphData[i]); 
       b.push(1); 
      } else { 
       b[b.length - 1]++; 
      } 
      prev = graphData[i]; 
     } 

     var graphData = []; 
     for (var i = 0; i < a.length; i++) { 
      var singleO = {label: '' + a[i], data: [[i, b[i]]]}; 
      graphData.push(singleO); 
     } 
     return graphData; 
    }; 

    $scope.getOptionForChart = function(panel) { 
     var options = angular.copy($scope.defaultPlotOptions); 
     var typeGraph = panel.graph.type; 
     switch (typeGraph) { 
      case "BAR": 
      options.series.bars.show = true; 
      break; 
      case "LINE": 
      options.series.lines.show = true; 
      break; 
      case "PIE": 
      options.series.pie.show = true; 
      break; 
      case "POINT": 
      options.series.points.show = true; 
      break; 
      case "TABLE": 
      break; 
     } 
     return options; 
    }; 

Answer 1

你得到的錯誤是從一個無限循環消化。

在幾個地方，您正在調用每次都會返回新項目的函數。下面是來自docs從您收到表明，這可能會導致該錯誤的錯誤消息鏈接的例子：

One common mistake is binding to a function which generates a new array every time it is called. For example:

<div ng-repeat="user in getUsers()">{{ user.name }}</div> 

$scope.getUsers = function() { return [ { name: 'Hank' }, { name: 'Francisco' } ]; }; 

Since getUsers() returns a new array, Angular determines that the model is different on each $digest cycle, resulting in the error. The solution is to return the same array object if the elements have not changed:

var users = [ { name: 'Hank' }, { name: 'Francisco' } ]; 

$scope.getUsers = function() { return users; }; 

在代碼中，你正在做同樣的結合getDataForChart和getOptionForChart。