컨트롤러와 각도 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가 렌더링 될 때 특정 인스턴스의 값을 가져오고 각도와 같은 양방향 바인딩 기능을 제공하지 않습니다. 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); 

을 얻거나, 통화가

완료 될 때 다시 그리기