AngularJs call method in template directive - angularjs

Question

I have following directive that renders a number value like 3 as 3.xxx
depending on argument decimals
app.directive("myValue", () => {
return {
template: '{{value.toFixed(decimals)}}',
scope: {
'value': '=myValue',
'decimals': '=myValueDecimals'
},
link: function () {
}
}
});
Now I want to include handling of special values like undefined,NAN etc.
I already have a function that should replace value.toFixed(decimals)
but I cannot figure out how to call a function directly in the directive.
Update: the view value is being changed dynamically so it should be refreshed whenever the value changes

Answer 1

You need to create viewValue in the directive's scope and assign handled value to it. For typescript you might want to do something like this:
interface IValueScope extends IScope {
viewValue:number;
}
app.directive("myValue", () => {
return {
template: '{{viewValue}}',
scope: {
'value': '=myValue',
'decimals': '=myValueDecimals',
},
link: function ($scope:IValueScope) {
$scope.viewValue = $scope.value == null || Number.isNaN($scope.value)
? 0
: $scope.value.toFixed($scope.decimals);
}
}
});
const app = angular.module('app', []);
app.component('home', {
template: '<span><button ng-click="$ctrl.inc()">Inc</button> <data-val data-my-value="$ctrl.v" data-my-value-decimals="2" ></my-value> </span>',
controller: function() {
this.v = 1;
this.inc = () => this.v += 1;
}
});
app.directive("val", () => {
return {
template: '{{viewValue}}',
scope: {
'value': '<myValue',
'decimals': '<myValueDecimals',
},
link: function($scope) {
const newValue = (v) => v == null || Number.isNaN(v) ?
0 :
v.toFixed($scope.decimals)
$scope.viewValue = newValue($scope.value);
const cleanup = $scope.$watch('value', (value) => {
$scope.viewValue = newValue(value)
});
$scope.$on('$destroy', () => cleanup());
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<home></home>
</div>