AngularJS: 송신과 서버 응답 사이의 모든 폼 제어 비활성화

AngularJS: 송신과 서버 응답 사이의 모든 폼 제어 비활성화

유저가 「Save(저장)」버튼이나 「Submit(송신)」버튼을 클릭해, 유저를 조작할 수 없게 해, 데이터 전송이 회선상에서 행해지는 동안, 폼 컨트롤을 무효로 하는(또는 적어도 유저와의 대화에 사용할 수 없게 하는) 최선의(및 올바른) 어프로치에 대해 고민하고 있습니다.JQuery를 사용하지 않고 모든 요소를 배열로 쿼리합니다(클래스 또는 속성 마커별).지금까지 제가 생각한 아이디어는 다음과 같습니다.

• 모든 요소에 표시cm-form-control커스텀 디렉티브는, 「데이터 송신」과 「데이터 송신」의 2개의 통지를 서브 스크라이브 합니다.커스텀 코드는 두 번째 알림을 푸시하거나 약속을 해결하는 역할을 합니다.
• 사용하다promiseTracker그런 바보같은 코드를 만들도록 강요한다.ng-show="loadingTracker.active()"모든 요소가 다음을 가지는 것은 아닙니다.ng-disabled또, 유저에게의 유저도입하고 싶지 않습니다.ng-hide/show버튼을 누르지 않도록 합니다.
• 꾹 참으면서도 JQuery 사용

누구 더 좋은 생각 있어요?

갱신:필드 세트 아이디어는 기능합니다.http://jsfiddle.net/YoMan78/pnQFQ/13/ 를 사용하고 싶은 분들을 위한 간단한 바이올린을 소개합니다.

HTML:

<div ng-app="myApp">
    <ng-form ng-controller="myCtrl">
        Saving: {{isSaving}}
        <fieldset ng-disabled="isSaving">
            <input type="text" ng-model="btnVal"/>
            <input type="button" ng-model="btnVal" value="{{btnVal}}"/>
            <button ng-click="save()">Save Me Maybe</button>
        </fieldset>
    </ng-form>
</div>

및 JS:

var angModule = angular.module("myApp", []);

angModule.controller("myCtrl", function ($scope, $filter, $window, $timeout) {
    $scope.isSaving = undefined;
    $scope.btnVal = 'Yes';
    $scope.save = function()
    {
        $scope.isSaving = true;
        $timeout( function()
             {
                 $scope.isSaving = false;
                 alert( 'done');
             }, 10000);
    };
});

모든 필드를 필드 세트로 랩하고 다음과 같이 ngDisabled 디렉티브를 사용합니다.

<fieldset ng-disabled="isSaving"> ... inputs ...</fieldset>

필드 세트 내의 모든 입력이 자동으로 비활성화됩니다.

그 후 컨트롤러 세트$scope.isSaving로.truehttp 콜 전 및 대상false끝나고.

최신 브라우저에는 다음과 같은 간단한 솔루션이 있습니다.

1. css 클래스의 정의

   .disabled {
     pointer-events: none;
     ... ...
   }
   

2. 이 클래스를 에 추가하다ng-form

   <ng-form data-ng-class="{ 'disabled': isSaving }"> ... inputs ... </ng-form>
   

다음은 포인터 이벤트 지원 차트입니다.

주의: 를 설정했을 경우pointer-events: none키보드로 요소를 입력할 수 있습니다.

언급URL : https://stackoverflow.com/questions/21638079/angularjs-disabling-all-form-controls-between-submit-and-server-response