div가 디세이블(ng)인 경우에도 ng-click이 기동됩니다.

div가 디세이블(ng)인 경우에도 ng-click이 기동됩니다.

문제는 말이다ng-click동작하는 이벤트입니다.cancelTicket === false그것은 여전히 발화한다ng-click어떻게 하면 막을 수 있지?

<div class="btn-block save-changes padding-10" ng-class="{'gray':cancelTicket===false,'secondary-button':cancelTicket===true}" ng-click="CancelTicket(ticketPin)" ng-disabled="cancelTicket===false" style="display: table;">
    <div class="button-container padding3" ng-class="{'pointer':cancelTicket===true}">
        <button-spinner promise="cancelPromise"></button-spinner>
        <div style="display: inline-block !important;"> @Translator.Translate("CANCEL") </div>
    </div>
</div>

이벤트가 트리거되는 것은div는 디세이블입니다.

다음과 같은 표현에 대한 느긋한 평가를 사용하면 이를 피할 수 있습니다.isDisabled || action()그래서 만약 그렇다면 조치를 취하지 않을 것이다.isDisabled이true.

고객님의 경우 다음과 같습니다.

ng-click="cancelTicket === false || CancelTicket(ticketPin)"

DIV 태그를 버튼 태그로 변경해야 합니다.저는 좋아요.

클릭 이벤트를 비활성화할 수 있습니다.ng-click이disabled.

j쿼리:

$('*[ng-click]').on('click',function(event) {
     var $el = $(event.target);
     if($el.attr('disabled')) {
        event.stopPropagation();
     }
});

모든 DOM 요소에서 이 작업을 수행하면 원치 않는 결과가 발생할 수 있습니다.또, DOM 상에서 갱신된 새로운 HTML 상에서, 상기의 조작을 실시할 필요가 있습니다.

대신 버튼만 수정하여 예상대로 작동하도록 할 수 있습니다.

각도:

angular.module('app').directive('button',function() {
     return {
          restrict: 'E',
          link: function(scope,el) {
              var $el = angular.element(el);
              $el.bind('click', function(event) {
                  if($el.attr('disabled')) {
                      event.stopImmediatePropagation();
                  }
              });
          }
     }
});

위는 하지 않겠습니다.div너무 무거울 것 같은 요소들이죠.대신 접근 방식을 변경하여button요소는 클릭 가능한 상호작용에만 사용됩니다.그런 다음 다른 것처럼 스타일링할 수 있습니다.div요소들.

<a class="btn btn-danger btn-xs" ng-click="vm.handleRemove(device)" ng-disabled="status === 1">Delete</a>

태그를 버튼 태그로 변경한 후 확인

<button class="btn btn-danger btn-xs" ng-click="vm.handleRemove(device)" ng-disabled="status === 1">Delete</button>

제 솔루션은 ng-click 대신 사용되는 속성을 가진 html 디렉티브를 사용하여

<html-tag-directive new-click="ctrl.functionToCall()" disabled="ctrl.disabled" >

및 지시문은 다음과 같이 정의됩니다.

1) 템플릿:

<button type="button" 
   ng-disabled="disabled" ng-click="onClick()">
</button>

2) 컨트롤러:

angular.module('module')
.directive('htmlTagDirective',function() {
    return {
        restrict:'E',
        templateUrl:'template.html',
        scope:{
            disabled:'=',
            click: '&'
        },
        link:function(scope,element){

            scope.onClick = function() {
                if (!(scope.disabled)) {
                    scope.newClick();
                }
            };

        }
    };
});

언급URL : https://stackoverflow.com/questions/32005918/ng-click-still-fires-when-div-is-ngdisabled