javascript - 表单提交后更新页面 - 使用 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();

在您的示例中，我将在 Controller 中创建如下所述的函数，并更改

<input type="submit">

至

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

<小时/>

我在这里创建了一个 super 简单的按钮，其中有一个按钮可以带您返回:

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>