未知ReferenceError：Tankvalueが定義されていません

Question

グラフに応答データを表示したいとします。しかしTankvalueは、スコープから出ると、変数がグローバルにアクセスすることが可能にする方法エラーメッセージ

Tankvalue is not defined.

を与えています。チャートは未定義の値のためロードされません。グラフにTankvalueと表示したい

var app = angular.module('myApp', []); 
app.controller('myCtrl', function ($scope, $http) { 
    $http.get('url', { 
      headers: { 
       'Authorization': 'Basic Pasword==' 
      } 
     }) 
     .then(function (response) { 
      $scope.names = response.data; 
      $scope.decodedFrame = atob($scope.names.dataFrame); 
      var Tankvalue = $scope.decodedFrame.substring(6); 


     }); 
}); 
FusionCharts.ready(function() { 
    var fusioncharts = new FusionCharts({ 
     type: 'cylinder', 
     dataFormat: 'json', 
     id: 'fuelMeter-1', 
     renderAt: 'chart-container', 
     width: '200', 
     height: '350', 
     dataSource: { 
      "chart": { 
       "theme": "fint", 
       "caption": "Tank", 
       "subcaption": "Bakersfield Central", 
       "lowerLimit": "0", 
       "upperLimit": "25", 
       "lowerLimitDisplay": "Empty", 
       "upperLimitDisplay": "Full", 
       "numberSuffix": " ltrs", 
       "showValue": "1", 
       "chartBottomMargin": "45", 
       "showValue": "0" 
      }, 
      "value": Tankvalue, 
      "annotations": { 
       "origw": "400", 
       "origh": "190", 
       "autoscale": "1", 
       "groups": [{ 
        "id": "range", 
        "items": [{ 
         "id": "rangeBg", 
         "type": "rectangle", 
         "x": "$canvasCenterX-45", 
         "y": "$chartEndY-30", 
         "tox": "$canvasCenterX +45", 
         "toy": "$chartEndY-75", 
         "fillcolor": "#6caa03" 
        }, { 
         "id": "rangeText", 
         "type": "Text", 
         "fontSize": "11", 
         "fillcolor": "#333333", 
         "text": "80 ltrs", 
         "x": "$chartCenterX-45", 
         "y": "$chartEndY-50" 
        }] 
       }] 
      } 

     }, 

    }); 
    fusioncharts.render(); 
}); 

Answer 1

$http.get()非同期関数であるので、FusionCharts.ready()ランTankvalue変数に割り当てられた値の前に。 この移動を修正するにはready()の機能が.then()の内部にあります。

それが好きです：あなたが割り当てられているように同じ

var app = angular.module('myApp', []); 
app.controller('myCtrl', function ($scope, $http) { 
    $http.get('url', { 
      headers: { 
       'Authorization': 'Basic Pasword==' 
      } 
     }) 
     .then(function (response) { 
     $scope.names = response.data; 
     $scope.decodedFrame = atob($scope.names.dataFrame); 
     var Tankvalue = $scope.decodedFrame.substring(6); 
     FusionCharts.ready(function() { 
     var fusioncharts = new FusionCharts({ 
     type: 'cylinder', 
     dataFormat: 'json', 
     id: 'fuelMeter-1', 
     renderAt: 'chart-container', 
     width: '200', 
     height: '350', 
     dataSource: { 
      "chart": { 
       "theme": "fint", 
       "caption": "Tank", 
       "subcaption": "Bakersfield Central", 
       "lowerLimit": "0", 
       "upperLimit": "25", 
       "lowerLimitDisplay": "Empty", 
       "upperLimitDisplay": "Full", 
       "numberSuffix": " ltrs", 
       "showValue": "1", 
       "chartBottomMargin": "45", 
       "showValue": "0" 
      }, 
      "value": Tankvalue, 
      "annotations": { 
       "origw": "400", 
       "origh": "190", 
       "autoscale": "1", 
       "groups": [{ 
        "id": "range", 
        "items": [{ 
         "id": "rangeBg", 
         "type": "rectangle", 
         "x": "$canvasCenterX-45", 
         "y": "$chartEndY-30", 
         "tox": "$canvasCenterX +45", 
         "toy": "$chartEndY-75", 
         "fillcolor": "#6caa03" 
        }, { 
         "id": "rangeText", 
         "type": "Text", 
         "fontSize": "11", 
         "fillcolor": "#333333", 
         "text": "80 ltrs", 
         "x": "$chartCenterX-45", 
         "y": "$chartEndY-50" 
        }] 
       }] 
      } 

     }, 

    }); 
    fusioncharts.render(); 
    }); 
    }); 
}); 

Answer 2

あなたはそれをグローバル他function.makeのうち、ローカル変数を使用するか、$スコープを使って、スコープ変数として作成することはできません。

$scope.Tankvalue = $scope.decodedFrame.substring(6); 

Answer 3

Move FusionCharts.ready() inside then block as shown below. 
.then(function (response) { 
      $scope.names = response.data; 
      $scope.decodedFrame = atob($scope.names.dataFrame); 
      var Tankvalue = $scope.decodedFrame.substring(6); 

      FusionCharts.ready(function() { 
       var fusioncharts = new FusionCharts({ 
        type: 'cylinder', 
        dataFormat: 'json', 
        id: 'fuelMeter-1', 
        renderAt: 'chart-container', 
        width: '200', 
        height: '350', 
        dataSource: { 
         "chart": { 
          "theme": "fint", 
          "caption": "Tank", 
          "subcaption": "Bakersfield Central", 
          "lowerLimit": "0", 
          "upperLimit": "25", 
          "lowerLimitDisplay": "Empty", 
          "upperLimitDisplay": "Full", 
          "numberSuffix": " ltrs", 
          "showValue": "1", 
          "chartBottomMargin": "45", 
          "showValue": "0" 
         }, 
         "value": Tankvalue, 
         "annotations": { 
          "origw": "400", 
          "origh": "190", 
          "autoscale": "1", 
          "groups": [{ 
           "id": "range", 
           "items": [{ 
            "id": "rangeBg", 
            "type": "rectangle", 
            "x": "$canvasCenterX-45", 
            "y": "$chartEndY-30", 
            "tox": "$canvasCenterX +45", 
            "toy": "$chartEndY-75", 
            "fillcolor": "#6caa03" 
           }, { 
            "id": "rangeText", 
            "type": "Text", 
            "fontSize": "11", 
            "fillcolor": "#333333", 
            "text": "80 ltrs", 
            "x": "$chartCenterX-45", 
            "y": "$chartEndY-50" 
           }] 
          }] 
         } 

        }, 

       }); 
       fusioncharts.render(); 
      }); 

     });