IT

AngularJS : 설치 및 서버 응답 사이의 모든 양식 제어 사용 안함

lottoking 2020. 7. 14. 07:56
반응형

AngularJS : 설치 및 서버 응답 사이의 모든 양식 제어 사용 안함


사용자가 사용하지 않는 "저장"또는 "제복"버튼을 클릭하는 동안 양식 컨트롤을 최소한으로 사용자 상호 작용에 사용할 수 없게 만들려면 가장 좋은 방법에 있습니다. 그리고 와이어를 통해 이동하는 데이터. JQuery (악한 !!!)를 사용하고 싶지 않고 모든 요소를 ​​배열 (클래스 또는 속성 마커별로)로 쿼리하고 싶지 않습니다. 지금까지의 아이디어는 다음과 가변적입니다.

  • cm-form-control"data-sent"및 "data-processed"라는 두 가지 알림을 구독 할 사용자 지정 지시문으로 모든 요소를 ​​표시하십시오 . 그런 다음 사용자 정의 코드는 두 번째 알림을 푸시하거나 약속을 해결합니다.
  • 사용 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);
    };
});


모든 필드를 fieldset으로 고 다음 과 같이 ngDisabled 지시문을 사용 합니다.

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

모든 입력을 자동으로 설정합니다.

다음 그런 컨트롤러 에서 설정 $scope.isSavingtrueHTTP 호출하고 전에 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

반응형