AngularJS表單提交和重定向

有沒有一種方法可以在不使用異步調用的情況下使用AngularJs提交表單？ 我希望它的行爲就好像我在常規HTML表單上按下提交按鈕一樣。AngularJS表單提交和重定向

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){}); 

    } 


}]);

來源

2016-02-07 Andrew

如果您使用的是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的角度服務。

當然，這可能會被視爲一個會話，但如果提供的其他兩個選項不適合您的需要，它是角度的方式。

來源

2016-02-07 12:53:47

AngularJS表單提交和重定向

回答

相關問題