There is a directive in my code that splits decimals from a number and displays it with different styles on the view. However, I am facing an issue where the values do not update when the input changes.
I frequently utilize this directive to showcase currency related information in the view.
Here's how the directive looks:
app.directive('money', function(){
return {
restrict: 'E',
scope: {
money: '@'
},
controller: controller,
controllerAs: 'dvm',
bindToController: true,
template: '<h2><sup>$</sup>{{ dvm.dollar }}<sub>.{{ dvm.cents }}</sub></h2>'
};
function controller(){
var parts = parseFloat(this.money).toFixed(2).split(/\./);
this.dollar = parts[0];
this.cents = parts[1];
}
});
I need to update these values multiple times based on user selections, but currently, they do not reflect the changes made by the user. What could be the best solution to address this issue?