AngularJS를 사용하여 서버에서 응답 할 때까지 UI를 사용 중지하는 방법

Question

angularjs 및 nodejs (express)으로 웹 앱을 구축 중입니다.

내 앱에서 사용자가 여러 번 서버와 통신하게되며 결과에 따라 문제가 발생합니다.

사용자가 서버에서 응답해야하는 항목을 호출 할 때마다 UI가 보류 상태이고 사용자가 다른 작업을 수행하지 못하게하려고합니다. 따라서 사용자가 버튼을 여러 번 클릭하여 내 서버에 과부하가 걸리지 않도록합니다.

Answer 1

할 수있는 경우에는이를 피하십시오. 가능하면 통화 보류 중이라도 계속해서 작업을 수행 할 수 있습니다.

이이 될 수없는 경우 Bootstrap modal을 사용하면 페이지가 마스킹 요소로 오버레이됩니다. 완료되면 모달을 제거하십시오. 당신은 모달의 설정으로 노는 것에 상당히 눈에 거슬리지 않게 할 수 있습니다.

물론 애플리케이션에 서버에 대한 미해결 요청 (아마도 jQuery의 ajaxStart 및 ajaxStop 사용)이 있음을 나타내는 플래그가있을 수 있으며 해당 플래그가 설정되면 추가 작업을 사용하지 않도록 설정할 수 있습니다.

Answer 2

단추에 ng-disabled 지시문을 사용하면 한 번 클릭 한 후에 단추를 비활성화 할 수 있습니다.

컨트롤러 :

$scope.isDisabled = false; 

$scope.submitForm = function() { 
    $scope.isDisabled = true; 
    // submit form and wait for response here 
    // reset isDisabled when you get it 
} 

HTML :

<button ng-click="submitForm()" disabled="{{scope.isDisabled}}">Submit</button> 

당신이 더 일반적인 것을, 당신이 요청하면 응답이 수신되기 전에 변수를 설정할 수 있습니다 각도의 아약스 interceptors 필요한 경우

. 이를 사용하여 UI를 사용자 정의하고 인터셉터가 완료되었는지 여부에 따라 중지 할 항목을 허용하지 않을 수 있습니다.