지연 양식 제출 (AngularJS)

Question

콜백을받을 때까지 양식을 각도로 제출하지 못하게하려면 어떻게해야합니까?

나는이 라인을 따라 뭔가가 : 양식을 제출하기 전에

<form method="post" action="http://example.com/external" ng-submit="submit()"> 
    <input type="hidden" name="foo" value="{{bar}}" /> 
    <input type="submit" /> 
</form> 

, 나는 ($http를 사용하여) 로컬 API 호출에서 {{bar}} 가치를 얻을하고 를 허용하기 전에 범위에 배치해야 실제 양식 제출 ($http을 사용하여 게시하지 않음). 어떻게 할 수 있습니까?

Answer 1

각도에서 양식 지시어는 폼 컨트롤러에 포장하고 차단합니다. 비동기 코드는 계속 실행할 수 있지만 제출하려면 DOM 양식을 참조해야합니다. 솔루션에 대한 예제가 있습니다. 기본적으로 양식을 제출하는 버튼을 설정하고 비공개로 숨겨진 필드를 설정 한 다음 게시합니다.

이

http://jsfiddle.net/jeremylikness/T6B2X/

코드의 "추악한"부분이있다 : 당신이 바이올린을 실행하면

MyController = function ($scope, MyService) { 
      $scope.boo = ""; 
      $scope.submit = function() { 
       MyService.getAsync().then(function(result) { 
        $scope.boo = result; 
        document.myForm.action = "http://example.com/"; 
        document.myForm.submit(); 
       }); 
      };    
     }; 

당신은 숨겨진 필드가 채워집니다 볼 수 있습니다 : 여기

는 관련 코드 직접 참조 :

document.myForm

이것을 정리하려면 폼에 속성을 배치하고 조작하는 서비스와 상호 작용할 수있는 직접 지시문을 작성할 수 있습니다. 나는. MyFormService 그리고 나서 MyFormService.setAction (url)과 MyFormService.submit()을 할 수 있습니다 - 더 깨끗하고 재사용 할 수 있지만 시간은 내가 당신을 위해 그것을 설정할 수 없습니다.

Answer 2

많은 가능성이 있지만 ng-switch를 사용하는 것이 위험합니다.

ng-switch는 필요하지 않은 경우 DOM을로드하지 않습니다.

<span ng-switch on="barNotEmpty"> 
     <span ng-switch-when="true"> 
     <form method="post" action="http://example.com/external" ng-submit="submit()"> 
      <input type="hidden" name="foo" value="{{bar}}" /> 
     </form> 
     </span> 
     <span ng-switch-default> 
     <form> 
      <input type="hidden" name="foo" value="{{bar}}" /> 
     </form> 
     </span> 

ng-submit 상태의 문서로서

Answer 3

는 :

는 또한 그 기본 동작 (폼 서버에 요청을 송신하여 현재 페이지를 새로 고침 의미) 만 방지 양식에 조치 속성이 들어 있지 않은 경우

그래서 작업 속성을 제거하고 범위의 submit() 핸들러에서 직접 처리하십시오. http 호출을하고 성공 핸들러에서 수동으로 양식을 제출하십시오.

Answer 4

제출이 허용되지 않은 경우 제출 버튼의 onClick 이벤트를 사용하여 false를 반환하는 함수를 호출 할 수 없습니까?

i.e. onClick='return CheckIfFooPopulated();' 

그런 다음이 함수에서 foo는 아직 설정되지 않았으므로 false를 반환하고 제출하면 true입니다.

Answer 5

the docs에 설명 된대로 특성에서는 ng-submit이 작동하지 않습니다.

그러면 컨트롤러에서 submit() 안에 원하는 모든 작업을 수행 할 수 있습니다. 그러나 양식 입력 필드는 모델을보다 잘 제어 할 수 있기 때문에 ng-model을 사용합니다.

입력 필드를 범위에 바인딩하려면이 $scope.formModel을 사용합니다.

당신은 그런 submit을 구현할 수 :

$scope.submit = function() { 
    $http.get("URL").success(function(data) { 
    $http.post("URL2", { model: $scope.formModel, bar: data.bar }).success(function() { 
     $location.path("/new-route"); 
    }); 
    }); 
}