Angular JS指令范圍值綁定與控制器未定義

Question

我創建了一個顯示圖表的簡單指令。

我有一個$ http請求的角度指令。 我必須將響應存儲到$ scope中，並將此$ scope值訪問我的link指令范圍以顯示圖表。

我正在嘗試使用上午圖表角度圖來實現量表

這是我的代碼：

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時，它會獲取特定實例的值，並且無法像angular那樣進行雙向綁定。因此，當執行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);

或通話結束后至少重畫