Köşeli ui-sref içeren bir gönderme düğmesi nasıl oluşturulur

Question

Çok adımlı bir formum var, her adım bir sonraki adıma geçmek için btn-link kullanıyor. Ben bu şekilde açısal yolları ile bunu başarmak: Ben verisi göndermeniz gerekir bütün formun ortasında adımlardan birinde

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

, bu yüzden de formu göndermek için zaten tarif düğmeye ihtiyaç ve sadece form gönderilebiliyorsa, bir sonraki adıma geçin. Bunu yaparken denedim ama bir sonraki adıma yönlendirir çünkü

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

nasıl açısal kullanarak bunu başarabilirsiniz form hakkında Bakımı olmadan çalışmıyor?

Answer 1

aşağıda gösterildiği gibi yerine denetleyicisinden $state servisini kullanmak sonraki buton için ui-sref kullanmak gerekmez

HTML Kod

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

Kontrolör

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

Formu iletmek için ng-submit'u kullanın ve form kaydedildikçe bazı yükleme iletilerini gösterin,'u kullanarak verileri ve başarılı olan kullanıcıyı bir sonraki yola $state.go kullanarak gönderin.

<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>