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);

或通话结束后至少重画