Question

我创建了一个显示图表的简单指令。

我有一个带有$ http请求的角度指令。我必须将响应存储到我的$ scope中，并将此$ scope值访问到我的链接指令范围以显示图表。

我正在尝试使用am chart angular chart

来实现仪表图表

这是我的代码：

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

或在呼叫完成时至少重绘

Angular js指令范围值与控制器绑定未定义

1 个答案: