仅在console.log（）之后更新角度模型

Question

UPDATE

I found that the problem was not with Angular, but a mistake in the update function in the node server controller. The fix is below, and I'm leaving the question here to help those that may have made the same mistake I did.

ORIGINAL QUESTION

Angular model doesn't change when a property is changed in a form. Code:

<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>

When I select the check box, either going to true or false, and submit the form, the original model is sent to the server, not updated. I then inserted ng-click="logDj() to log the model and see what is happening. However, when I click it, the model updates. What I'm looking for is a more detailed explanation of why this is?

Here is the controller:

    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);
    };
  }
]);

I thought maybe because the property didn't previously exist that it may cause this behavior, but even when the property is populated when retrieved, the model refuses to change.

I'm using the default set-up for MEAN.JS by Yeoman; if that helps at all.

EDIT This only affects the checkboxes. The other fields change the model values.

Answer 1

Just my guess, try initialize the object before accessing it; it's unclear how you set the other fields (which work), maybe they are set in the scope directly, not under dj namespace

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

to verify, add a line of debugger within the update method, and inspect the dj object;

$scope.update = function (isValid) {
    debugger; // it should create a breakpoint in chrome dev tools
    var dj = $scope.dj;

hope this helps

Answer 2

After following the data around as it goes through the process of updating the Dj model, I found what I was missing. It has nothing to do with Angular, but rather the server.controller in node. Although the create function works without modification, the update function in the controller must be updated to match the model. When the PUT request is sent, the middle where populates the req with the Dj model when a valid ID is 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! };

This is then passed to the update function, where I should have matched the fields in the request body with those in the Dj model. Original code:

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);
    }
  });
};

The original code also had the field title, which made it appear as if the update function was working properly when testing in the browser and changing this field, but fail when marking the checkboxes. The working code is:

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);
    }
  });
};