[javascript] AngularJS : 제출 및 서버 응답 사이의 모든 양식 컨트롤 비활성화

Program / 글쓴이

사용자가 일종의 “저장”또는 “제출”단추를 클릭하는 기간 동안 양식 컨트롤을 비활성화 (또는 최소한 사용자 상호 작용에 사용할 수 없도록 설정)하려는 경우 최상의 (올바른) 접근 방식이 무엇인지에 대한 딜레마가 있습니다. 그리고 유선을 통해 이동하는 데이터. 나는 JQuery를 사용하고 싶지 않다 (악한 !!!) 모든 요소를 ​​배열 (클래스 또는 속성 마커로)으로 쿼리하고 싶지 않다.

  • cm-form-control“데이터 전송 됨”및 “데이터 처리됨”의 두 가지 알림을 구독 할 사용자 지정 지시문으로 모든 요소를 ​​표시합니다 . 그런 다음 사용자 지정 코드는 두 번째 알림을 푸시하거나 약속을 해결합니다.
  • 사용 promiseTracker(unfortunatelly!) 그을 적용을 같은 매우 바보 같은 코드를 생성하는 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);
    };
});

답변

모든 필드를 fieldset에 래핑하고 다음 과 같이 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키보드로 요소를 입력 할 수 있습니다.

답변