Note that there are some explanatory texts on larger screens.

plurals
  1. POAngular $scope not updating when passing value through parser
    text
    copied!<p>Notice that even values which pass validation are not making it intact through the parser. The parser returns the correct value, but then when the formatter is called the old value is still present in the model. Can someone explain this to me?</p> <p>Here's the plnkr</p> <p><a href="http://plnkr.co/edit/uSLkKtLZIU63wRou3x8V?p=preview" rel="nofollow">http://plnkr.co/edit/uSLkKtLZIU63wRou3x8V?p=preview</a></p> <p>and the code</p> <pre><code>angular.module('timeEntryModule', []).directive('timeEntryTotalHoursInput', function() { return { require: '^ngModel', link: function($scope, $element, $attrs, ngModel) { ngModel.$formatters.push(function (modelValue) { if (modelValue === 0) { return undefined; } else { return modelValue.toFixed(2); } }); ngModel.$parsers.push(function (viewValue) { var tempVal = parseFloat(viewValue); if (tempVal) { ngModel.$setValidity('timeEntryInputError', true); ngModel.$modelValue = tempVal; } else { ngModel.$setValidity('timeEntryInputError', false); ngModel.$modelValue = undefined; } return ngModel.$modelValue; }); } }; </code></pre> <p>});</p> <pre><code>angular.module('timeEntryModule').controller('TimeEntryCtrl', ['$scope', function ($scope) { $scope.testproperty = 2; }]); &lt;!doctype html&gt; &lt;html ng-app="timeEntryModule"&gt; &lt;head&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"&gt;&lt;/script&gt; &lt;script src="script.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body ng-controller="TimeEntryCtrl"&gt; &lt;input ng-model="testproperty" time-entry-total-hours-input /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Thanks in advance!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload