表单提交后更新页面 - 使用 Angular

Question

我正在使用 MEAN 框架 - 我有一个基本表单（如下所示），当输入数据时，它会被发送到一个 rest API，该 API 然后有一个使用 Mongoose 保存数据的函数。这一切都很好......但是我坚持更基本的东西！

用户提交此表单后，它会出现在带有 api/img/add 的空白页面上，我如何返回到我的原始页面？我尝试在表单标签中添加 ng-submit="fetchImages()" 然后在脚本中实现一个函数（也如下所示）但由于某种原因这不起作用，我是否错过了重点并且做错了什么？

提前致谢

<form action="api/img/add" method="post" enctype="multipart/form-data">
      <div>
        <label for="image">Select an image</label>
        <input type="file" name="image" id="image">
      </div>
      <div>
        <label for="title">Title</label>
        <input type="text" name="title" id="title">
      </div>
      <input type="submit">
    </form>

 < script >
   angular.module('app', []).controller('main', ['$scope', '$http',
     function($scope, $http) {
       $scope.images = [];
       $scope.fetchImages = function() {
         $scope.images = [];
         $http.get('api/img').then(function(res) {
           $scope.images = JSON.parse(res.data);
         }, function(res) {
           console.log(res.statusText);
         });
       }

       $scope.fetchImages();
     }
   ]); < /script>

Answer 1

如果你真的想回到最后一页，你可以使用：

$window.history.back();

在您的示例中，我将在控制器中创建如下所述的函数，然后进行更改

<input type="submit">

到

<input type="submit" ng-click="goHome()">

---

我在这里创建了一个超级简单的 plunk，带有一个可以带您返回的按钮：

https://plnkr.co/edit/wzMlPF9kOmrGg01mOnBB?p=preview

JS

app.controller('ctrl',function($scope,$window){

  $scope.goHome = function() {
    $window.history.back();
  }

});

HTML

<button ng-click="goHome()">Go Home</button>

Answer 2

试试这个： 在html中

    <form ng-submit="submitData()">
      <div>
        <label for="image">Select an image</label>
        <input type="file" ng-model="formdata.image" id="image">
      </div>
      <div>
        <label for="title">Title</label>
        <input type="text" ng-model="formdata.title" id="title">
      </div>
      <input type="submit">
    </form>

在您的控制器中：

 angular.module('app', []).controller('main', ['$scope', '$http',
 function($scope, $http) {

   $scope.formdata = {};
   $scope.images = [];

   $scope.fetchImages = function() {
     $scope.images = [];
     $http.get('api/img').then(function(res) {
       $scope.images = JSON.parse(res.data);
     }, function(res) {
       console.log(res.statusText);
     });
   }

   $scope.fetchImages();

   //this function will post data to your api without refreshing the page
   $scope.submitData = function(){

      $http.post('api-comes-here', $scope.formdata).then(function(res) {
          //handle success
      }, function(error) {
           //handle error
      });


   }
 }