角度付きjsディレクティブスコープ値とコントローラとのバインドが未定義

Question

チャートを表示するシンプルなディレクティブを作成しました。

私は、$ http要求で角度指示文を持っています。私は$スコープにレスポンスを格納し、この$スコープの値をリンクディレクティブのスコープにアクセスしてチャートを表示する必要があります。

私はここで午前チャート角度チャート

を使用してゲージチャートを実装しようとしているが、私のコードです：

app.directive('gauge',function(){ 
    return { 
     restrict: 'AEC', 
     replace:true, 
     template: '<div id="speeda_meter"></div>', 
     scope: {ranges:'='}, 
     controller: function ($scope, $http,apiurl) { 
      $scope.type = 'percentage'; 
      function getUsage(type){ 
       $http({ 
        method: 'POST', 
        url: apiurl + '/getUsage', 
        data: {'type': $scope.type} 
       }).success(function (data, status) { 
        if (data.status == true) { 
         $scope.ranges = data.result.ranges; 
         $scope.interval = data.result.interval; 
        }  
       }); 
      }  
      getUsage($scope.type); 

     }, 
     link: function (scope, element, attrs,ctrl) { 
      var chart = false;    
     //  ngModelCtrl.$formatters.push(function(modelValue) { 
     //   return modelValue; 
      // }); 

      // ngModelCtrl.$render = function() { 

       //scope.ranges = ngModelCtrl.$viewValue; 
       console.log(ctrl.ranges); 
       var initChart = function() { 
        if (chart) chart.destroy(); 
        var config = scope.config || {}; 
        chart = AmCharts.makeChart("speeda_meter", { 
          "type": "gauge", 
          "axes": [ { 
           "axisThickness": 0, 
           "axisAlpha": 0.2, 
           "tickAlpha": 0.2, 
           "valueInterval": 425, 
           "inside": false, 
           "fontSize": 11, 
           "gridInside": true, 
           "startAngle": -90, 
           "endAngle": 90, 
           "bands": scope.ranges, 
           "topText": "497", 
           "topTextYOffset": 105, 
           "topTextColor": "#555555", 
           "topTextFontSize": 50, 
           "bottomText": "Watts", 
           "bottomTextYOffset": -10, 
           "bottomTextColor": "#909090", 
           "bottomTextFontSize": 18, 
           "endValue": 1700 
          }], 
          "arrows": [{ 
           "startWidth" : 15, 
           "nailBorderThickness" : 1, 
           "nailRadius" : 8 , 
           "color" : "#5b5b5b", 
          }], 
          "export": {"enabled": true} 
        });   
       }; 
       initChart();  
      // }    
     }   
    } 
}); 

<gauge ranges="ranges" interval="interval"></gauge> 

私がリンクに割り当てることが応答から範囲や間隔にしようとしていますスコープですが、定義されていません。それは何が間違っていますか？

Answer 1

非同期呼び出しの後に来る値を割り当てようとしています。 あなたのamhchartがレンダリングされるとき、その特定のインスタンスの値をとり、angle doesのように双方向バインドすることはできません。あなたのinit関数が実行されると、$ scope.rangesの値はチャート。

呼び出しはこの

function getUsage(type){ 
      $http({ 
       method: 'POST', 
       url: apiurl + '/getUsage', 
       data: {'type': $scope.type} 
      }).success(function (data, status) { 
       if (data.status == true) { 
        $scope.ranges = data.result.ranges; 
        $scope.interval = data.result.interval; 

        initChart()//call the chart rendering here 
       }  
      }); 
     }  
     getUsage($scope.type); 

または少なくともコールが

を完了すると、再描画のように完了した後にあなたがチャートをレンダリングする必要があります