AngularJS Form Submit and Redirect

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.

Уверенный, что это может считаться сеансом, но это угловой способ, если другие два предоставленных варианта не соответствуют вашим потребностям.