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

あなたは

HTMLコード

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

コントローラ

下に示したように、あなたのコントローラから $stateサービスを使用する代わりに、あなたの次のボタンのUI-SREFを使用する必要はありません

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を使用してデータを送信し、成功すると次のルートに移動します。

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