Issue with Angular.js formatter not triggering when modelValue changes

Check out this link for more information

ctrl.$formatters runs initially when setting the model value, but not after updating it.

After reading this thread about $formatters being called when view is first populated, I expected it to trigger every time the model value changes. Can someone help me understand what's going on? Thank you.

Answer №1

Try using the natural model setter, scope[attrs.ngModel] instead of setviewvalue.

app.directive('format', function($filter) {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
    element.unbind('input').unbind('keydown').unbind('change');
        element.bind('blur', function() {
            if (element.val()) {
                scope.$apply(function() {
                    scope[attrs.ngModel] = element.val();
                });         
            }
        });

        ctrl.$formatters.unshift(function(modelValue) {
            if (modelValue) {
                var formatted = $filter('currency')(modelValue);
                return formatted;
            }
        });
    }
}
});

To ensure this works correctly, a parser will also be necessary.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Edit script: Iterate through the different div elements at regular intervals AND pick a specific div by pressing a button

Check out this interesting discussion about displaying and hiding divs at specific time intervals using jQuery on the page here. The script mentioned is designed to loop through DIVs, showing one after the other while hiding the rest. It's titled "Lo ...

Creating a cooldown feature for individual users across all commands in Discord.js

What should I do if a user is spamming my commands and I want all commands to have the same cooldown for that specific user? Below is my current code: if (talkedRecently.has(msg.author.id)) { msg.channel.send("Wait before getting typing t ...

I am attempting to send an array from the controller to JavaScript using AJAX, but instead of returning as an array, it is being returned as a string

Here is the code snippet from my controller: <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Facades\DB; class AjaxController extends Controller { public function s ...

Arranging a string array in JavaScript according to an integer array

Looking at the provided javascript arrays: letterArray ['a', 'e', 'i', 'o', 'u'] We also have another array that corresponds to it: valueArray [12, 22, 7, 7, 3] The goal is to sort the valueArray into: ...

I encountered an issue when attempting to kick a user on Discord using a bot, as an error message was

Whenever I attempt to use my custom bot to kick someone, it keeps throwing an error. I closely followed CodeLyons' ban and kick tutorial from his 2020 discord bot playlist. The persistent error message is as follows: (node:5108) DeprecationWarning: T ...

What is the method for deactivating body parser json and urlencoded specifically on certain website links?

let shouldParseRequest = function (req) { let url = req.originalUrl; return (url.startsWith('/api/payments/stripe-webhook') || url.startsWith('/uploadimg')); } let parseJSON = bodyParser.json({ limit: '900kb' }); let u ...

Encountering a jQuery error while trying to utilize the $window.load

I have a code snippet that is functioning well when wrapped within a document ready event: jQuery(document).ready(function($) { $('tr[data-name="background_colour"] input.wp-color-picker').each(function() { //this section works fin ...

Creating unique identifiers for each level within a multidimensional array using JavaScript

I'm currently working on creating a list that contains all the distinct levels within a multidimensional array of objects. Given this dataset... let levels = [ ["P", "B", "L"], ["A", "B", "L3"], ["A", "B", "L3"], ["P", "B", "M"], ["P", "C", ...

How to change the color of the tooltip text in Bootstrap Vue

In an attempt to modify the color of the tooltip text from its default to red https://i.sstatic.net/fF78X.png Any payment made during the night hours (00:00 – 06:00) must be displayed as red. ...

transmit an extensive base64 encoded string to the webapi

While sending a post request to the webapi controller using my AngularJS, one of the parameters includes a base64 string value. $scope.upload = function(Id, formdata) { debugger; if ($scope.logoattachments[0].fileSize != '&apos ...

The search form on my website is not functioning correctly as the input field is not taking any

My website can be found at I have noticed that the search field on my website does not allow input in Firefox version 17.01. Interestingly, the search function works perfectly fine on Chrome and Internet Explorer browsers. On my website's header, the ...

Guide to modify target blank setting in Internet Explorer 8

<a href="brochure.pdf" target="_blank" >Click here to download the brochure as a PDF file</a> Unfortunately, using 'target blank' to open links in a new tab is not supported in Internet Explorer 8. Are there any alternative solutio ...

Determining the completion of file unzipping using the npm `unzip` module

Currently, I am utilizing the npm unzip module to extract the content of a zip file. It is important for me to determine when the extraction process is complete and the file has been successfully saved to disk. Here is my code snippet: fs.createReadStrea ...

Uncheck all Angular Checkbox Filters

Is there a way to easily uncheck all checkboxes in this filter with the click of a button? Feel free to view the demo in this [fiddle](http://jsfiddle.net/65Pyj/) ...

Alternative to updating object coordinates in Fabric JS 1.7.9 - seeking solutions for migration challenges

Update: JSFiddle: https://jsfiddle.net/Qanary/915fg6ka/ I am currently working on implementing the `curveText` function (found at the bottom of this post). It was functioning properly with `fabric.js 1.2.0`, but after updating to `fabric.js 1.7.9`, I not ...

What is the method for calling a JavaScript function from one file to another within a Node.js environment?

Just starting out with JavaScript and exploring the idea of breaking the code into multiple modules. While working with nodejs, I've encountered an issue where it's complaining about pathChecker not being defined. Any insights on how to resolve t ...

The Next JS Middlewares are experiencing issues with malformed URLs. It is recommended to only use absolute URLs to

I've encountered an issue with the code in my _middleware file that is located within the pages folder. Every time a request is made, it keeps throwing a URL malformed error. Here's the code snippet: const token = await getToken({req, secret: pr ...

Transform HTML entities to an escaped string in CSS content dynamically

I am aware that special html-entities like &nbsp; or &#246; or &#x0F0; cannot be incorporated within a css block like the following: div.test:before { content:"text with html-entities like `&nbsp;` or `&#246;` or `&#x0F0;`"; } ...

What is the most efficient method for delivering a script along with the initial index.html file?

Currently, I have my JavaScript code inline in the index.html file, but I want to move it to a separate file. <script> ... my code </script> After doing some research, I found that there are server side includes which seem outdated. There are ...

Generate HTML on the fly using Node variables

Utilizing Node.js with Express as the server, I have implemented a feature where users can upload .CSV files containing data. This data is then parsed and stored in a main array made up of arrays, with each line representing one array element. Currently, I ...