Question

有没有办法在不使用异步调用的情况下使用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){});

    }


}]);

Answer 1

如果您使用的是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了解有关角度服务的更多信息。

当然，这可能会被视为一个会话，但如果提供的其他两个选项无法满足您的需求，则会采用有角度的方式。

Answer 2

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

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

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

AngularJS表单提交和重定向

2 个答案: