Struggling with observing the properties of JavaScript objects has been a challenge for me. I attempted to explain this issue in more detail here, but unfortunately, I haven't found a solution yet...
To elaborate on the problem further, you can find a working example here.
Below is the code snippet from my directive:
var myApp = angular.module('myApp', []);
var ctrl = function($scope) {
$scope.amount = '0.00';
$scope.values = {
amount: 0.00
};
};
myApp.directive('currency', function($filter) {
// Directive logic goes here
});
Here is how my HTML layout looks like:
<div ng-app="myApp">
<div ng-controller="ctrl">
{{amount}}<br>
<input type="text" style="text-align: right;" ng-model="amount" currency separator="point" fraction-size="2"></input>
</div>
</div>
The aim is to link the input value to the values.amount variable in the outer controller, however, the watch functionality within my directive seems to be malfunctioning...
The desired behavior should add extra zeros to the input when a user inputs a decimal point. For instance, if the initial value in the input field is "42" and the user adds a decimal point resulting in "42.", then two additional zeros should automatically append making it "42.00".
When using ng-model="amount" for data binding, the logic within the input element functions correctly, but the value of amount in the outer controller fails to update.
On the other hand, utilizing ng-model="values.amount" for binding prevents both the values.amount in the outer controller and the input element's logic from functioning properly.
My goal is to bind the input element to values.amount via ng-model="values.amount", despite encountering obstacles and inconsistencies with this approach.
If anyone can offer assistance or suggestions to resolve this dilemma, I would greatly appreciate it.