Привязка значения области директивы Angular js к контроллеру undefined

Я создал простую директиву, которая отображает диаграмму.

У меня есть угловая директива с запросом $http. Я должен сохранить ответ в своей $scope и получить доступ к этому значению $scope в моей области директивы ссылки, чтобы отобразить диаграмму.

Я пытаюсь реализовать калибровочную диаграмму, используя угловую диаграмму диаграммы

Вот мой код:

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>

Я пытаюсь назначить диапазоны и интервалы ответа в области ссылок, но он не определен. Что не так с этим?

Любое решение?


jquery angularjs angularjs-directive angular-controller
person Trent    schedule 28.09.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы пытаетесь присвоить значение, которое приходит к вам после асинхронного вызова. Когда ваш amhchart визуализируется, он принимает значения для этого конкретного экземпляра и не дает вам возможности двусторонней привязки, как это делает angular. Следовательно, когда ваша функция инициализации выполняется, значение $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);

или хотя бы перерисовать по завершению звонка

person AbhiGoel    schedule 28.09.2016