角度模型仅在控制台后更新.log(）

Angular model updates only after a console.log()

本文关键字：更新 log 控制台 模型      更新时间：2023-09-26

>UPDATE

我发现问题不在于 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>

当我选中复选框（变为 true 或 false）并提交表单时，原始模型将发送到服务器，而不是更新。然后，我插入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 的默认设置; 如果这有帮助的话。

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

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

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

若要验证，请在 Update 方法中添加一行调试器，并检查 DJ 对象; 

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

希望这有帮助

在跟踪

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

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

然后将其传递给 update 函数，我应该在其中将请求正文中的字段与 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);
    }
  });
};
相关文章：