Using Angular's watch function to automatically update variables that are outside the function scope

Question

Using Angular's watch function to automatically update variables that are outside the function scope

As a beginner with angularjs, I have encountered an issue that has left me puzzled.

I am wondering how I can ensure that when the watch function runs for the second time (on init), the testValue is "changed".

<div ng-controller="MyCtrl"></div>

Here is the javascript code :

var myApp = angular.module('myApp',[]); 
function MyCtrl ($scope) {
  var testValue = null;
  $scope.watchMe = null;        
  $scope.$watch('watchMe', function () {
    console.log('testValue is', testValue);        
    if(testValue !== null){
        console.log('I want to do something different the 2nd time this code runs - but I never get in here...');
    }
    testValue ="changed";
  });
};

For reference, you can view the code on this jsfiddle example.

Thank you for your assistance.

javascript angularjs

Answer 1

Answer №1

Your approach to using watch seems a bit off

Watch should be used to respond to changes in a model and trigger additional actions

You need to designate a model as the watch expression and monitor it for any changes so that the watch function is activated

<div ng-app="myApp" ng-controller="MyCtrl">
  <input type="text" ng-model="name" placeholder="Enter your name">
  <p>{{greeting}}</p>
</div>

and here's the JavaScript code:

var myApp = angular.module('myApp',[]); 
function MyCtrl($scope) {
  $scope.name = "";

  $scope.$watch("name", function(newValue, oldValue) {
    if ($scope.name.length > 0) {
      $scope.greeting = "Greetings " + $scope.name;
         console.log("change detected: " + newValue);
    }
  });
}

Answer 2

Your approach to using watch seems a bit off

Watch should be used to respond to changes in a model and trigger additional actions

You need to designate a model as the watch expression and monitor it for any changes so that the watch function is activated

<div ng-app="myApp" ng-controller="MyCtrl">
  <input type="text" ng-model="name" placeholder="Enter your name">
  <p>{{greeting}}</p>
</div>

and here's the JavaScript code:

var myApp = angular.module('myApp',[]); 
function MyCtrl($scope) {
  $scope.name = "";

  $scope.$watch("name", function(newValue, oldValue) {
    if ($scope.name.length > 0) {
      $scope.greeting = "Greetings " + $scope.name;
         console.log("change detected: " + newValue);
    }
  });
}

Answer 3

Answer №2

After some investigation, it was determined that the issue did not lie within the watch itself, but rather in the controller being called twice. It is still unclear why this occurs within the fiddle, but a log was added to pinpoint this as the root cause.

To clarify further - the variable testValue continues to return null because the controller function runs again after the watch function, causing it to overwrite var testValue.

There could be many reasons for this behavior - in my situation, I had assigned the controller to an element, as showcased in the fiddle.

<div ng-controller="MyCtrl"></div>

Answer 4

After some investigation, it was determined that the issue did not lie within the watch itself, but rather in the controller being called twice. It is still unclear why this occurs within the fiddle, but a log was added to pinpoint this as the root cause.

To clarify further - the variable testValue continues to return null because the controller function runs again after the watch function, causing it to overwrite var testValue.

There could be many reasons for this behavior - in my situation, I had assigned the controller to an element, as showcased in the fiddle.

<div ng-controller="MyCtrl"></div>

Using Angular's watch function to automatically update variables that are outside the function scope

Answer №1

Answer №2

Similar questions

Attempting to prevent the insertion of duplicate values more than once

What is the best way to connect objects that have been separated?

What location is optimal for storing ng-templates within an Angular/Django single-page application?

Preventing users from selecting both future and current dates in a Bootstrap datepicker: A Step-by-Step Guide

Persisted state in Vuex fails to retain data after the page is refreshed

Executing Continuous Process using Node.js

Force restart broken socket within Node.js program using Socket.IO programmatically

Updating the background color and adjusting the main content background on a WordPress site

What is the best way to adjust the translateX value upon clicking a button?

Steps to Implement CSS Background Change on Click Event

Strange sequence of results coming from Vue.js

The state update was not completed before another update had already begun

Filtering data from a REST API in AngularJS according to the value entered in a textbox

Learn the process of synchronously loading forms and data in Angular

Tips on updating time zone settings in a browser using React JS or JavaScript

Synchronously retrieving JSON data from a URL using JavaScript

Having trouble retrieving information from the JSON data received from the Google Place Search API

What is the best way to save data in order to effectively showcase a collection of images that together form a single entity in a game

How can service properties be updated in AngularJS without moving the logic outside of the controller?

The Select2 ajax process runs twice