Here is a unique custom directive created to format numeric values into currency by adding proper punctuations and rounding decimal values.
var customDirectiveApp = angular.module('myApp.roundedValue', []);
customDirectiveApp.directive('roundedValue', function () {
return{
scope: {
data: '=items'
},
template: '<div>$ {{value|number}}</div>',
link: function(scope){
scope.value = Math.round(scope.data* 100) / 100;
}
};
});
To use the directive, you can do as below:
<div class="overallsummary_meter_txt left">
Total Price<br>
<span rounded-value items="totalPrice" class="orange_txt"></span>
</div>
The challenge faced here is receiving a null value if there's a delay in fetching the numeric value from the API.
How can we prevent the directive from executing until we have a valid value for the variable item?
Attempts with scope.$watch and timeout services have not been fruitful. How can this issue be resolved?