Angular js directive scope value binding with controller undefined

Question

I've created a simple directive that displays a chart.

I have an angular directive with an $http request. I have to store the response into my $scope and access this $scope value to my link directive scope to display the chart.

I'm trying to implement a gauge chart using am chart angular chart

Here is my code :

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>

I'm trying to ranges and interval from the response to assign in the link scope, but it's undefined. What is wrong with that?

Any solution?

Answer 1

You are trying to assign a value which is coming to you after an asynchronous call. When your amhchart is rendered it takes the values for that particular instance and does not give you the ability to two way bind like angular does.Hence when your init function is executed there is no value of $scope.ranges which gets undefined in the chart.

You should render the chart after the call has completed like this

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

or atleast redraw when the call is completed