AngularJS表单提交和重定向

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中的查询字符串结尾。 此答案中详细介绍了这种方法，我已经使用了很多次。 因此，不是使用$ 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（）返回该值。 从文档中了解有关角度服务的更多信息。

当然，可以将其视为会话，但是如果提供的其他两个选项都不适合您的需求，则这是一种有角度的方法。

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代码中使用的模型