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

Question

我正在使用 MEAN 框架 - 我有一个基本形式（如下所示），当输入数据时，它会被发送到 rest 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()">

我在这里创建了一个非常简单的插件，其中包含一个可以让您返回的按钮：

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

Update page after form submit - using Angular

html

javascript

node.js

angularjs

mean-stack