The Angular model finally refreshes its values after a console.log() is executed

Question

The Angular model finally refreshes its values after a console.log() is executed

UPDATE

After further investigation, I discovered that the issue was not related to Angular itself, but rather a mistake in the update function within the node server controller. I have provided the fix below for reference, and decided to keep this question here in case it can assist others who may encounter a similar error.

ORIGINAL QUESTION

I have noticed that the Angular model does not reflect changes when a property is altered within a form. Below is the code snippet:

<section class="container" ng-controller="DjsController" ng-init="findOne()">
  <form name="djForm" class="form-horizontal" ng-submit="update(djForm.$valid)" novalidate>
    <fieldset>
      <div>.... other form fields </div>

      <div class="form-group">
        <label>Guest:</label>
        <input name="guest" type="checkbox" ng-model="dj.guest">
      </div>

      <div class="form-group">
        <label>Featured:</label>
        <input name="featured" type="checkbox" ng-model="dj.featured">
      </div>

      <button type="button" ng-click="logDj()">Log it</button>

      <div class="form-group">
        <input type="submit" class="btn btn-default">
      </div>
    </fieldset>
  </form>

Upon selecting the checkbox and submitting the form, the original model gets sent to the server without being updated. To troubleshoot, I added ng-click="logDj() to observe the model behavior. Interestingly, the model updates upon clicking the button. I am seeking a detailed explanation for this phenomenon.

Below is the included controller code:

    angular.module('djs').controller('DjsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Djs',
  function ($scope, $stateParams, $location, Authentication, Djs) {
    $scope.authentication = Authentication;

    // Clear forms
    $scope.clear = ...

    // Create new Dj
    // $scope.create = ...

    // Remove existing Dj
    // $scope.remove = ...

    // Update existing Dj
    $scope.update = function (isValid) {
      $scope.error = null;

      if (!isValid) {
        $scope.$broadcast('show-errors-check-validity', 'djForm');

        return false;
      }
      // shows original model if logDj() is not fired
      console.log($scope.dj);

      var dj = $scope.dj;

      dj.$update(function () {

        $location.path('djs/' + dj._id);

      }, function (errorResponse) {
        $scope.error = errorResponse.data.message;
      });
    };

    // Find a list of Djs
    //$scope.find = ....

    // Find existing Dj
    $scope.findOne = function () {
      $scope.dj = Djs.get({
        djId: $stateParams.djId
      });
    };

    $scope.logDj = function() {
      console.log($scope.dj);
    };
  }
]);

Initially, I suspected that the issue might stem from the property not existing beforehand, but even when the property is pre-populated during retrieval, the model remains unchanged.

This peculiar behavior only seems to affect checkboxes; the values of other fields get updated as expected.

I am using the default MEAN.JS set-up generated by Yeoman, in case that information is relevant.

EDIT I have observed that this issue specifically pertains to checkboxes, while other field values are successfully updated.

javascript angularjs model scope meanjs

Answer 1

Answer №1

It is recommended to initialize the object before trying to access it. The way in which the other fields are set may be unclear, possibly they are being set directly in the scope and not under the dj namespace.

$scope.authentication = Authentication;
$scope.dj = {};
.
.
.
$scope.update = function (isValid) {
    var dj = $scope.dj;

To confirm, consider adding a debugger line within the update method to inspect the dj object:

$scope.update = function (isValid) {
    debugger; // this will set a breakpoint in Chrome Dev Tools
    var dj = $scope.dj;

I hope this information proves helpful.

Answer 2

It is recommended to initialize the object before trying to access it. The way in which the other fields are set may be unclear, possibly they are being set directly in the scope and not under the dj namespace.

$scope.authentication = Authentication;
$scope.dj = {};
.
.
.
$scope.update = function (isValid) {
    var dj = $scope.dj;

To confirm, consider adding a debugger line within the update method to inspect the dj object:

$scope.update = function (isValid) {
    debugger; // this will set a breakpoint in Chrome Dev Tools
    var dj = $scope.dj;

I hope this information proves helpful.

Answer 3

Answer №2

After closely tracking the data flow during the Dj model update process, I discovered the missing piece. It turned out to be related to the server.controller in node rather than Angular. While the create function worked without any issues, the update function in the controller required adjustments to align with the model. Specifically, when a PUT request is sent, the middleware populates the req with the Dj model whenever a valid ID is present in the params.

var djsPolicy = require('../policies/djs.server.policy'),
    djs = require('../controllers/djs.server.controller');

module.exports = function (app) {
  // Djs collection routes
  app.route('/api/djs').all(djsPolicy.isAllowed)
    .get(djs.list)
    .post(djs.create);

  // Single dj routes
  app.route('/api/djs/:djId').all(djsPolicy.isAllowed)
    .get(djs.read)
    .put(djs.update)
    .delete(djs.delete);

  // Finish by binding the dj middleware
  app.param('djId', djs.djByID); // HERE! };

Subsequently, this data is passed to the update function where it was crucial to ensure that the fields in the request body matched those in the Dj model. The original code snippet looked like this:

exports.update = function (req, res) {

  var dj = req.dj;

  dj.title = req.body.title;
  dj.content = req.body.content;

  dj.save(function (err) {
    if (err) {
      return res.status(400).send({
        message: errorHandler.getErrorMessage(err)
      });
    } else {
      res.json(dj);
    }
  });
};

It later became apparent that the original code only included the "title" field, resulting in misleading outcomes during browser tests when changing this specific field. Hence, the updated and functional code includes all necessary fields for a successful update operation:

exports.update = function (req, res) {
  var dj = req.dj;

  dj.title = req.body.title;
  dj.image = req.body.image;
  dj.images = req.body.images;
  dj.links = req.body.links;
  dj.categories = req.body.categories;
  dj.description = req.body.description;
  dj.guest = req.body.guest;
  dj.featured = req.body.featured;

  dj.save(function (err) {
    if (err) {
      return res.status(400).send({
        message: errorHandler.getErrorMessage(err)
      });
    } else {
      res.json(dj);
    }
  });
};

Answer 4

After closely tracking the data flow during the Dj model update process, I discovered the missing piece. It turned out to be related to the server.controller in node rather than Angular. While the create function worked without any issues, the update function in the controller required adjustments to align with the model. Specifically, when a PUT request is sent, the middleware populates the req with the Dj model whenever a valid ID is present in the params.

var djsPolicy = require('../policies/djs.server.policy'),
    djs = require('../controllers/djs.server.controller');

module.exports = function (app) {
  // Djs collection routes
  app.route('/api/djs').all(djsPolicy.isAllowed)
    .get(djs.list)
    .post(djs.create);

  // Single dj routes
  app.route('/api/djs/:djId').all(djsPolicy.isAllowed)
    .get(djs.read)
    .put(djs.update)
    .delete(djs.delete);

  // Finish by binding the dj middleware
  app.param('djId', djs.djByID); // HERE! };

Subsequently, this data is passed to the update function where it was crucial to ensure that the fields in the request body matched those in the Dj model. The original code snippet looked like this:

exports.update = function (req, res) {

  var dj = req.dj;

  dj.title = req.body.title;
  dj.content = req.body.content;

  dj.save(function (err) {
    if (err) {
      return res.status(400).send({
        message: errorHandler.getErrorMessage(err)
      });
    } else {
      res.json(dj);
    }
  });
};

It later became apparent that the original code only included the "title" field, resulting in misleading outcomes during browser tests when changing this specific field. Hence, the updated and functional code includes all necessary fields for a successful update operation:

exports.update = function (req, res) {
  var dj = req.dj;

  dj.title = req.body.title;
  dj.image = req.body.image;
  dj.images = req.body.images;
  dj.links = req.body.links;
  dj.categories = req.body.categories;
  dj.description = req.body.description;
  dj.guest = req.body.guest;
  dj.featured = req.body.featured;

  dj.save(function (err) {
    if (err) {
      return res.status(400).send({
        message: errorHandler.getErrorMessage(err)
      });
    } else {
      res.json(dj);
    }
  });
};

The Angular model finally refreshes its values after a console.log() is executed

Answer №1

Answer №2

Similar questions

Troubleshoot the Error: EEXIST - Directory already exists at 'C:UsersPhantom' while setting up a React application[RESOLVE]

Tips for sending information from PHP to an AJAX function

transfer data from local array to global variable

Locate the selected radio button's label

Having trouble getting routing to function properly with react-router-dom

javascript identify dissimilarities within arrays

javascript - The Key Pair of a Jquery Object is Not Defined

Error message: Angular 7 - Running out of memory due to JavaScript heap

How can I connect ng-options to retrieve data from a remote JSON source?

Troubleshooting KuCoin API: Dealing with Invalid KC-API-SIGN Error and FAQs on Creating the Correct Signature

Executing a SQL query using a JavaScript variable as a parameter

Is it possible to modify the size of a bullet image in Javascript?

Using React's useEffect to implement a mousedown event listener

Oops! The page you're looking for at /api/tasks

Can you explain the distinction between export/import and provide/inject in Vue3?

Retrieving information within the iteration

Oops! Looks like there's an issue with the type error: value.forEach is

Organize the JSON data in a particular manner

Having trouble loading the Google API using getScript. Is displaying a ReferenceError message: "Variable google not found."

Combining an AJAX POST within a JSON GET request