如何使用角度爲ui-sref創建提交按鈕

Question

我有一個多步表單，每個步驟都有一個btn-link移動到下一步。我以這種方式角航線實現這一目標：

<button ui-sref="next.step" class="btn btn-link"></button> 

在整個形式，我需要提交數據的中間步驟之一，所以我需要的已經描述按鈕提交表單，以及和只有在表單可以提交後才能進入下一步。 我試圖這樣做，但它不工作，因爲它重定向到下一步而不採取有關表單

<button ui-sref="next.step2" type="submit" class="btn btn-link"></button> 

我怎樣才能做到這一點使用的角度照顧？

Answer 1

你不需要使用的用戶界面，SREF你的下一個按鈕，而不是使用$state服務，從您的控制器如下圖所示

HTML代碼

<form ng-submit="onFormSubmission($event)"> 
    <button type="submit" class="btn btn-link"></button> 
</form> 

控制器

var successCallback = function(response) { 
    //process response 
    $state.go("next.step2"); 
} 

$scope.onFormSubmission = function($event) { 

    var data = getFormData(); 

    $http.post('/someUrl', data, config).then(successCallback, errorCallback); 

} 

Answer 2

使用ng-submit提交表單並顯示一些正在保存表單的加載消息，請使用$http發佈數據，並使用$state.go將用戶帶到下一條路線。

<script> 
    angular.module('submitExample', []) 
    .controller('ExampleController', ['$scope', '$state', function($scope, $state) { 
     $scope.list = []; 
     $scope.text = 'hello'; 
     $scope.submit = function() { 
     $http.get('/aveData', config).then(function(response){ 
      $state.go('next.step2') 
     }, function(){ 
      alert('error saving data'); 
     }); 
     }; 
    }]); 
</script> 
<form ng-submit="submit()" ng-controller="ExampleController"> 
    Enter text and hit enter: 
    <input type="text" ng-model="text" name="text" /> 
    <input type="submit" id="submit" value="Submit" /> 
</form>