>>Think I worked it out:
>>
>>The link function needs to be run pre-link with a priority > 0. i.e:
app.directive('smNumberFormat', ['$filter', function ($filter) {
>> return {
>> restrict: 'A', // only activate on element attribute
>> require: '?ngModel', // get a hold of NgModelController
>> priority: 100,
>> link: {
>> pre: function (scope, element, attrs, ngModel) {
>> if (!ngModel) return; // do nothing if no ng-model
>>
>> //Set the default decimal place to zero, if accuracy is not specified
>> var accuracy = parseInt(attrs.accuracy) || 0;
>> var stripCommas = attrs.stripCommas || true;
>>
>> ngModel.$render = function () {
>> return element.val(ngModel.$viewValue);
>> };
>>
>> var format = function (newValue) {
>> console.log("Running snNumberFormat formatter");
>> if (accuracy > 0) {
>> newValue = parseFloat(newValue);
>> } else {
>> newValue = parseInt(newValue);
>> }
>>
>> //Let's not show any value if it's zero or not a number, so the placeholder text is displayed instead
>> if (isNaN(newValue)) return undefined;
>>
>> newValue = $filter('number')(newValue, accuracy);
>>
>> if (stripCommas) {
>> newValue = newValue.split(",").join("");
>> }
>> return newValue;
>> };
>>
>> function bind() {
>> return ngModel.$formatters.push(function (value) {
>> return format(value);
>> });
>> }
>>
>> bind();
>>
>> element.on('blur', function () {
>> return element.val(format(ngModel.$viewValue));
>> });
>> }}>>
>> BTW, would you agree that for numberInput we probably don't need to check for actual number, we may just check for the value (could be a string) being a number. If that code would have checked that instead of isNumber function, then I would not have a problem.
>>
>>Not sure what you mean. If you're using 'type="number"' then angular ensures that the value received by your formatter will be the string value of a valid number.
>>If you're not using 'type="number"' then (assuming the model value is a number) then you will receive a number.
>
>I found situation where this fix still produced an error although a different one. I have that html:
>
>
> <table id="payInvoicesTable" ng-show="payInvoices" class="table table-bordered table-hover table-list">
> <thead data-search:table-header data-table="payInvoicesTable" data-search="search()">
> </thead>
> <tbody>
> <tr ng-repeat="result in payInvoices" ng-form="payInvoicesRow">
> <td>
> <input type="checkbox" ng-model="result.isToBePaid"
> ng-change="payChange(result)" />
> </td>
> <td>
> @*<a href="javascript:void(0);"><span ng-click="drillDown(result.invoice_No)">{{result.invoice_No}}</span></a>*@
> <a href=""><span ng-click="loadInvoiceView(result.invoice_No)">{{ result.invoice_No }}</span></a>
> </td>
> <td>
> {{result.descrip}}
> </td>
> <td>
> {{result.dateCreated |date: 'medium'}}
> </td>
> <td align="right">
> <span ng-class="{'negative-amount' : result.invoiceBalance < 0}">{{result.invoiceBalance | currency}}</span>
> </td>
> <td>
> <div class="input-group">
> <span class="input-group-addon">@Labels.currencySymbol</span>
> <input type="number" name="payment" ng-model="result.payment" id="payment"
> ng-disabled="!result.isToBePaid"
> ng-class="{'negative-amount' : result.payment < 0}"
> min="0"
> class="form-control"
> data-sm:number placeholder=" 000.00"
> data-sm:number-format data-accuracy="2" />
> <div class="field-validation-error">
> <span ng-show="payInvoicesRow.payment.$error.min">Payment should not be negative.</span>
> </div>
> </div>
> </td>
> </tr>
> </tbody>
> <tfoot>
> <tr>
> <td colspan="4">@Labels.pageTotal</td>
> <td><span ng-class="{'negative-amount': total('invoiceBalance') < 0}">{{total('invoiceBalance')|currency}}</span></td>
> <td>{{total('payment')|currency}}</td>
> </tr>
> </tfoot>
> </table>>
>So, as you can see I have number inside a cell in the table created using ng-repeat directive. Here it's not working. I'll try to remove format from that page and see if the problem will be resolved.
What's the error ? Does it work if you revert your directive to post-link (and unshift) ?
