Question

当我的页面加载时，会显示我的mongo db中的所有项目。我有一个表单来输入新条目或删除条目。创建或删除时，http进程可以正常工作，但新数据不会在DOM中更新。

我研究过的大多数相关问题都建议我确保我的ng-controller包裹整个身体。其他人建议使用$ apply，但我也读到这是错误的。当我尝试时，无论如何我都会被警告“正在进行中”。

我唯一的猜测是，在http请求之后，加载了一个新的范围，并且角度没有接受。或者由于某种原因，它只是在我的请求后没有重新加载数据。这是我的代码，谢谢你的帮助。

的index.html

<body ng-controller="MainController">

    <!-- list records and delete checkbox -->
    <div id="record-list" class="row">
        <div class="col-sm-4 col-sm-offset-4">
            <!-- loop over records in $scope.records -->
            <div class="checkbox" ng-repeat="record in records">
                <label>
                    <input type="checkbox" ng-click="deleteRecord(record._id)">
                    {{ record.artist}} - {{ record.album }} - {{ record.bpm}}
                </label>
            </div>
        </div>
    </div>
    <!-- record form data -->
    <div id="record-form" class="row">
        <div class="col-sm-8 col-sm-offset-2 text-center">
            <form>
                <div class="form-group">
                    <input type="artist" class="form-control input-lg text-center" placeholder="Artist" ng-model="formData.artist">
                </div>
                <div class="form-group">
                    <input type="album" class="form-control input-lg text-center" placeholder="Album" ng-model="formData.album">
                </div>
                <div class="form-group">
                    <input type="bpm" class="form-control input-lg text-center" placeholder="BPM" ng-model="formData.bpm">
                </div>
                <button type="submit" class="btn btn-primary btn-lg" ng-click="createRecord()">Add</button>
            </form>
        </div>
    </div>
</div>

controller.js

angular.module('myApp', []).controller('MainController', ['$scope', '$http', function ($scope, $http) {
$scope.formData = {};
$scope.sortType     = 'artist';
$scope.sortReverse  = false;
//$scope.searchRecords   = '';
$http.get('/api/records/')
  .success(function(data) {
      $scope.records = data;
      console.log(data);
  })
  .error(function(data) {
      console.log('Error: ' + data);
  });
  $scope.createRecord = function() {
      $http.post('/api/records/', $scope.formData)
          .success(function(data) {
              //$scope.formData = {};
              $scope.records = data;
              console.log(data);
          })
          .error(function(data) {
              console.log('Error: ' + data);
          });
  };
  $scope.deleteRecord = function(id) {
      $http.delete('/api/records/' + id)
          .success(function(data) {
              $scope.records = data;
              console.log("delete record scope: " + data);
          })
          .error(function(data) {
              console.log('Error: ' + data);
          });
  };

}]）

Answer 1

你的控制器JS看起来很好 - 我会说看看你需要在POST / DELETE成功时从你的mongoDB集合中导出更新的值。

如果您使用Mongoose（mongoDB插件），您可以更新您的API代码，以便在成功时发回更新的数据：

// POST
// --------------------------------------------------------
// Provides method for saving new record to the db, then send back list of all records

app.post('/api/records', (req, res) => {

    // Creates a new record based on the Mongoose Schema
    const newRecord= new Record(req.body);

    // New record is saved to the db
    newRecord.save((err) => {

        // Test for errors
        if(err) res.send(err);

        // Now grab ALL data on records 
        const all = Records.find({});
        all.exec((err, records) => {

           // Test for errors
           if(err)  res.send(err);

           // If no errors are found, it responds with JSON for all records
           res.json(records);
        });

    });
});

http请求后Angular不更新页面（范围问题？）

1 个答案: