当禁用div(ng)时,ng-click仍会触发

时间:2015-08-14 08:45:24

标签: javascript angularjs

问题是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>

5 个答案:

答案 0 :(得分:45)

即使div被禁用,也会触发事件。

您可以通过对isDisabled || action()之类的表达式进行延迟评估来避免这种情况,因此如果isDisabledtrue,则不会调用操作。

在你的情况下,它将是:

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

答案 1 :(得分:13)

您应该将DIV标记更改为Button Tag。 它对我有用。

答案 2 :(得分:3)

ng-click的元素为disabled时,您可以停用点击事件。

<强> jQuery的:

$('*[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元素类似。

答案 3 :(得分:0)

<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>

答案 4 :(得分:0)

我的解决方案是使用带有属性的html指令,而不是ng-click,这样

<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();
                }
            };

        }
    };
});