Question

更新

我发现问题不是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默认设置;如果这有帮助的话。

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

Answer 1

只是我的猜测，尝试在访问之前初始化对象;目前还不清楚你如何设置其他字段（哪个工作），也许它们直接在范围内设置，而不是在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;

希望这会有所帮助

Answer 2

在完成更新Dj模型的过程后跟踪数据后，我发现了我所遗漏的内容。它与Angular无关，而是与节点中的server.controller无关。尽管create函数无需修改即可工作，但必须更新控制器中的更新功能以匹配模型。当发送PUT请求时，当有效ID在params中时，中间用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! };

然后将其传递给更新函数，我应该将请求体中的字段与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（）之后更新

2 个答案: