Angular 模型仅在 console.log() 之后更新

Question

更新

我发现问题不在于Angular，而是节点服务器控制器中更新功能的错误。修复在下面，我把问题留在这里是为了帮助那些可能和我犯过同样错误的人。

原始问题

Angular 模型在表单中更改属性时不会更改。代码：

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

当我 select 复选框，无论是真还是假，并提交表单时，原始模型被发送到服务器，而不是更新。然后我插入 ng-click="logDj() 来记录模型并查看发生了什么。但是，当我单击它时，模型会更新。我正在寻找的是为什么会这样的更详细的解释？

这是控制器：

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

我想可能是因为属性以前不存在，所以它可能会导致此行为，但即使在检索时填充了属性，模型也拒绝更改。

我正在使用 Yeoman 的 MEAN.JS 默认设置；如果有帮助的话。

编辑这只会影响复选框。其他字段更改模型值。

Answer 1

只是我的猜测，尝试在访问之前初始化对象；目前还不清楚你是如何设置其他字段（哪些有效），也许它们是直接在范围内设置的，而不是在 dj 命名空间下

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

为了验证，在更新方法中添加一行调试器，并检查 dj 对象；

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

希望这对您有所帮助

Answer 2

在更新 DJ 模型的过程中跟踪数据后，我发现了我所缺少的东西。它与 Angular 无关，而是节点中的 server.controller 。尽管创建功能无需修改即可工作，但必须更新控制器中的更新功能以匹配模型。当发送 PUT 请求时，当参数中有有效 ID 时，中间位置用 Dj 模型填充请求。

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

然后将其传递给更新函数，我应该在其中将请求 body 中的字段与 Dj 模型中的字段进行匹配。原代码：

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

原代码也有字段标题，这使得在浏览器中测试和更改此字段时，更新功能似乎正常工作，但在标记复选框时失败。工作代码是：

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

Angular 模型仅在 console.log() 之后更新

Angular model updates only after a console.log()

javascript

scope

model

angularjs

meanjs