Angular watch triggering even when the old and new values remain unchanged

Question

Angular watch triggering even when the old and new values remain unchanged

        function displayController($scope) 
{

    $scope.currentView = myCustomInstance.currentView;


    $scope.$watch($scope.currentView, 
            function(newValue, oldValue)
            {       
                console.log(newValue);
                console.log(oldValue);

                console.log($scope.currentView);

                if($scope.currentView != null)
                    $scope.data = $scope.currentView.dataset;  
            }
        );

}

Output in console:

undefined script.js:10
undefined script.js:11
null

The object myCustomInstance represents an instance of a custom JavaScript class I developed. Initially, its currentView is set to null but changes value once the instance is created.

javascript angularjs

Answer 1

Answer №1

I'm not sure why the $watch function doesn't automatically handle this issue, but you are correct in your assessment. The $watch callback will trigger whenever there is a change in or an update to the reference of your $scope attribute. This means that the callback will be triggered even if the reference is updated to the same previous value.

To resolve this issue, follow these steps:

$scope.$watch('current_view_', function(newVal, oldVal){
    if(newVal != oldVal){  // do nothing if values are the same
        // include the rest of your code here, such as:
        $scope.dataset = $scope.current_view_.dataset;
    };
});

The watcher callback will still be activated, but it will now take no action when unnecessary. The $watch callback will continue to be triggered each time the reference to $scope.current_view_ changes, but it will only modify the $scope.dataset value if it changes to a different value than before. Does this explanation make sense?

Answer 2

I'm not sure why the $watch function doesn't automatically handle this issue, but you are correct in your assessment. The $watch callback will trigger whenever there is a change in or an update to the reference of your $scope attribute. This means that the callback will be triggered even if the reference is updated to the same previous value.

To resolve this issue, follow these steps:

$scope.$watch('current_view_', function(newVal, oldVal){
    if(newVal != oldVal){  // do nothing if values are the same
        // include the rest of your code here, such as:
        $scope.dataset = $scope.current_view_.dataset;
    };
});

The watcher callback will still be activated, but it will now take no action when unnecessary. The $watch callback will continue to be triggered each time the reference to $scope.current_view_ changes, but it will only modify the $scope.dataset value if it changes to a different value than before. Does this explanation make sense?

Answer 3

Answer №2

During the $watch event, there is typically a difference between oldValue and newValue, except for one specific case: when the watcher is initialized. This means that on the initial run of the function, oldValue may equal to newValue. AngularJS documentation explains this as:

Once a watcher is added to the scope, the listener function is asynchronously called (via $evalAsync) to set up the watcher. In some rare instances, this may not be desirable because the listener gets triggered even when watchExpression remains unchanged. To identify this situation within the listener function, you can compare newVal and oldVal. If they are exactly the same (===), then the listener was activated due to initialization.

Answer 4

During the $watch event, there is typically a difference between oldValue and newValue, except for one specific case: when the watcher is initialized. This means that on the initial run of the function, oldValue may equal to newValue. AngularJS documentation explains this as:

Once a watcher is added to the scope, the listener function is asynchronously called (via $evalAsync) to set up the watcher. In some rare instances, this may not be desirable because the listener gets triggered even when watchExpression remains unchanged. To identify this situation within the listener function, you can compare newVal and oldVal. If they are exactly the same (===), then the listener was activated due to initialization.

Answer 5

Answer №3

When using $watch, the callback is only triggered when the value changes, unless it is during initialization. This explains why the output displayed is related to initialization. In future instances, the callback will be activated with a new value that is not undefined.

It seems like you didn't pose a question or mention any specific issue you are facing. Perhaps you were taken aback by the fact that the old and new values can be the same in a $watch callback.

Answer 6

When using $watch, the callback is only triggered when the value changes, unless it is during initialization. This explains why the output displayed is related to initialization. In future instances, the callback will be activated with a new value that is not undefined.

It seems like you didn't pose a question or mention any specific issue you are facing. Perhaps you were taken aback by the fact that the old and new values can be the same in a $watch callback.

Angular watch triggering even when the old and new values remain unchanged

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to change a variable in an AngularJS view?

ng-repeat and $scope problem

Exploring the basics of Three.js: a step-by-step guide using a shadertoy example on transforming patterns with objects

Retrieve a result from this promise

Running Javascript code to perform drag and drop in Selenium for UI integration testing in Java

Unable to get i18next functioning in my Node.js Express backend

The ng-view component in Angular seems to be causing issues with the routing functionality

Learn the method for invoking a service from a different module using $on and $broadcast

nodemon encountered an error and is currently on standby for any updates before restarting

interaction & portal

Performing additions on two-dimensional arrays using Angular/JavaScript

AngularJS written plugin in Javascript

Is there a way to modify the space bar and enter key functionality exclusively for the third button, rather than applying it to all buttons?

Guide to automatically update div with new table rows with the help of Ajax

Merging Data from Multiple Forms in an Angular Application

Tips for preventing the extraction of resolve from promises and initiating a process before a callback

Retrieve the specific key or object number by conducting a search in JavaScript

Unable to apply CSS styles to a form input using Ajax

What is a method to mimic the presence of JavaScript using PHP Curl?

Ways to verify if the CSS background-color is set to white?