[ Angular JS : Custom directive Issue (directive not working properly if there is a delay of data reception from the api) ]

Below is a custom directive I have written to format a numeric value into currency with appropriate punctuations and to round the decimal values.

var directiveapps = angular.module('myApp.roundedValue', []);
  directiveapps.directive('roundedValue', function () {
   return{
    scope: {
      data: '=items'
    },
    template: '<div>$ {{value|number}}</div>',
    link: function(scope){
      scope.value = Math.round(scope.data* 100) / 100;
    }
  };
});

The directive call is as follows,

<div class="overallsummary_meter_txt left">
Total Price<br>
<span rounded-value items="totalPrice" class="orange_txt"></span>
</div>

The problem I am facing is that I am getting a null value if it takes more time to get the numeric value from API.

How can I hold the directive from executing until we get a value from the api to the variable item

I have tried using scope.$watch and timeout service, but the results were not satisfactory.

How can I fix this issue ??

Answer 1

try adding ng-if={api data arrives} statement to a directive, so angular will attach the custom directive template only if the data is available..

<div ng-if={IsDataAvailable} class="overallsummary_meter_txt left">
Total Price<br>
<span rounded-value items="totalPrice" class="orange_txt"></span>
</div>