Question

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

用户提交此表单后，会在api / img / add的空白页面上登录，如何返回原始页面？我尝试添加ng-submit =＆＃34; fetchImages（）＆＃34;在form标签内然后在脚本中实现一个函数（也在下面显示）但由于某种原因这不起作用，我是否错过了重点并做了一些非常错误的事情？

提前致谢

<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>

＆＃13;

 < 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>

＆＃13;

Answer 1

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

$window.history.back();

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

<input type="submit">

到

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

我在这里创建了一个非常简单的插件，带有一个可以带你回来的按钮：

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


   }
 }

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

2 个答案: