Guide to dynamically generating Angular watchers within a loop

Question

Guide to dynamically generating Angular watchers within a loop

I'm looking to dynamically create angular watches on one or more model attributes. I attempted the following approach:

var fields = ['foo', 'bar'];
for (var i=0, n=fields.length; i<n; i++) {
    $scope.$watch('vm.model.' + fields[i], function(newValue, oldValue) {
        console.log(fields[i]); //always 'bar'
        //logic that was not giving the expected results
    });
}

Unfortunately, this code always worked with the last element of the array during each loop iteration. I've encountered similar issues with asynchronous code in the past - could that be causing this behavior here? If so, how can it be resolved?

javascript angularjs asynchronous

Answer 1

Answer №1

The reason behind this behavior is that once a watcher is registered within the scope, the listener function is triggered asynchronously using $evalAsync to initialize the watcher -- for more details, you can refer to the official documentation and locate the first occurrence of $watch on the page.

Considering this, one way to tackle it would be by delegating to another function during each iteration of the loop, as illustrated below:

var fields = ['apple', 'banana'];
for (var i=0, n=fields.length; i<n; i++) {
    establishWatch(fields[i]);
}
function establishWatch(field) {
    $scope.$watch('vm.data.' + field, function(newValue, oldValue) {
        console.log(field); //'apple' initially, followed by 'banana'
        //code logic here to achieve the expected outcome
    });
}

Answer 2

The reason behind this behavior is that once a watcher is registered within the scope, the listener function is triggered asynchronously using $evalAsync to initialize the watcher -- for more details, you can refer to the official documentation and locate the first occurrence of $watch on the page.

Considering this, one way to tackle it would be by delegating to another function during each iteration of the loop, as illustrated below:

var fields = ['apple', 'banana'];
for (var i=0, n=fields.length; i<n; i++) {
    establishWatch(fields[i]);
}
function establishWatch(field) {
    $scope.$watch('vm.data.' + field, function(newValue, oldValue) {
        console.log(field); //'apple' initially, followed by 'banana'
        //code logic here to achieve the expected outcome
    });
}

Guide to dynamically generating Angular watchers within a loop

Answer №1

Similar questions

Managing extensive text-based passages or titles within React.js

The client continues to request the file through the REST API

Error: The function registerUser from require(...) is not defined

Exploring the Possibilities of Wordpress Search with Multiple Dropdown Options

The error message "Error: 'x' is not a defined function or its output is not iterable"

Managing headers for localhost with Access-Control-Allow-Origin

Adjust the color of the button and update the text using AngularJS

What could be causing the TypeError I encounter when trying to import @wordpress/element?

Managing dynamic input texts in React JS without using name properties with a single onChange function

Is it possible for JavaScript/React to observe the movement of elements on the webpage?

Directing users to a specific section on another webpage can be accomplished using HTML, JavaScript, or

When working with TypeScript, how do you determine the appropriate usage between "let" and "const"?

What is the best location to place AngularJS scope $watch functions?

Pass the returned variable value from a request.get call to another function in NodeJS Express

Using jQuery to smoothly scroll to a specific class name

Unable to properly connect my CSS file to the header partial

Is there a way to render a component without having to render AppComponent constantly?

Discovering the properties of a class/object in a module with Node.js

Conundrum regarding setting up configuration for express-session middleware in Express version 4.x

Guide to interacting with the Li element using JavaScript in Selenium