AngularJS表单提交和重定向

Posted 2021-03-27

有没有办法在不使用异步调用的情况下使用AngularJs提交表单？我希望它的行为就像我点击常规html表单上的提交按钮一样。

HTML：

<div ng-controller="myController">
    <form id="myForm">
      <input ng-model="handle">
      <button ng-click="submitForm($event)">Submit</button>
    </form>
</div>

目前我正在这样做，就像我在下面。问题是，我仍然在同一页面上，然后我必须重定向。但下一页的内容取决于表单提交，我宁愿不在会话中存储表单提交的内容。

angular.module('myApp').controller('myController', ['$scope', function($scope) {

    $scope.handle;

    $scope.submitForm = function($event) {

        $event.preventdefault();

        var modifiedHandle= $scope.handle + 'handle';

        $http({
            url: '/submit',
            method: 'POST',
            data: {'handle': modifiedHandle }
        }).then(function(response){

           $window.location.href = '/success';

           //The problem of this approach is that the contents of '/success' depends on the form input.
           //I'd rather not have to flash the submitted data to a session. Is there a pure AngularJs way to do this?

        }, function(data, status){});

    }


}]);

答案

如果您使用的是ui-router而不是ngRoute，则可以将对象作为参数传递给新状态。此参数不会以URL中的查询字符串结尾。这种方法在this answer中有详细介绍，我多次使用过这种方法。因此，不使用$ window，而是使用$ state.go。

或者，您还有其他2个选项。您可以将对象直接放在$ rootScope上，使其可以从成功页面的控制器访问。一般来说，你不想污染你的rootScope，但它会起作用。

我认为最实用的角度方法是创建一个存储价值的服务。服务是单例，因此当您设置值时，可以从其他控制器访问它。您的服务可能如下所示：

app.service("Store", function() {

    var formObject = {};

    this.set = function(object) {
        formObject = object;
    };

    this.get = function() {
        return formObject;
    };

    return this;
});

然后，在成功提交表单后，您将调用Store.set（yourObject），然后在加载新控制器时，可以调用Store.get（）来返回值。阅读更多关于docs角度服务的信息。

当然这可能被认为是一个会话，但如果提供的其他两个选项不能满足您的需求，那么这是一种有条理的方式。

另一答案

使用Angular Js CLI，您可以通过以下方式在成功提交表单上重定向您的页面：

postData(email){
    if(email==""){
      alert('email feild is empty');
      return false;
    }
    else{
      window.location.href = 'https:wwww.google.com';
    }
  }

• postData（email）下的电子邮件基本上是在html代码中使用的模型