angularjs 양식 서비스 후 조치

Question

html 양식의 데이터를 기본 동작 URL로 POST 데이터로 보내고 싶지만 하나의 숨겨진 입력은 서비스 호출에서 반환 된 데이터에 따라 다릅니다. ng-submit을 사용할 때 은 서비스 호출 후 POST이 완료되기 전에 업데이트되지 않습니다. POST 뒤에 HTML 페이지가 있기 때문에 Ajax POST을 사용할 수 없습니다.

양식은 다음과 같습니다

<form name="payment" role="form" class="form-inline" ng-show="!loading" method="POST" action="{{paymentUrl}}" ng-submit="createOrder()" novalidate> 
    <input type="hidden" id="responseUrl" name="responseUrl" value="{{postPaymentUrl}}"/> 
    <input type="hidden" id="orderNumber" name="orderNumber" value="{{orderNumber}}"/> 
    <select class="form-control" id="paymentMethodBrand" name="paymentMethodBrand"> 
     <option ng-repeat="paymentMethod in paymentMethods | orderBy:'method'" value="{{paymentMethod.method}}">{{paymentMethod.method}}</option> 
    </select> 
    <button type="submit" class="btn btn-default" translate="BUY"></button> 
</form> 

이 action 필드에있는 URL이 올바르게 채워집니다.

컨트롤러의 createOrder 기능이 있습니다 :

$scope.createOrder = function() { 
    Payment.start($scope.selectedProduct) 
    .then(function (response) { 
      $scope.orderNumber = response.data.orderNumber; 
    }); 
}; 

문제는 숨겨진 입력 주문 번호는 실제 액션 URL을 열기 전에 작성되지 않는다는 것입니다. 따라서 게시 된 데이터가 올바르지 않습니다.

이 문제를 해결하는 방법에 대한 의견이 있으십니까? angularjs 1.2.16을 사용하고 있습니다.

Answer 1

문제는 Payment.start은 약속을 해결하기 위해 비동기 적으로 설정하지만 양식 제출은 즉시 발생합니다. 일반적으로 Angular가 클라이언트 기반 응용 프로그램 용으로 설계된 경우 폼의 action 특성을 생략하여 Angular 기반 양식의 기본 동작을 방지 할 수 있습니다. 그러나 당신의 경우에 당신은 일반적인 http 포스트가 일어나기를 원한다. 그리고 그것은 드문 것이다. 우리는 "모범 사례"를 벗어난 여행을 떠납니다.

그렇다면이 방법이 비정상적인 사용 사례라는 점을 인정하면서, 저는 약간의 해킹이있는 해결책을 제시 할 것입니다. 당신은 약속이 Payment.start에서 해결되면 다음을 추가, 양식에서 action 속성을 생략하고, 단지 다음 양식 제출 트리거 할 수 :

$scope.createOrder = function() { 
    Payment.start($scope.selectedProduct) 
    .then(function (response) { 
      $scope.orderNumber = response.data.orderNumber; 
      var form = $('#form-id'); 
      form.attr('action', $scope.paymentUrl); 
      form.submit(); 
    }); 
}; 

이 검증되지 않은,하지만 난 당신을 위해 일한다고 생각합니다.