在materizaliecss中添加“禁用”类时,ng-click不工作

时间:2020-12-03 19:39:22

I'm using AngularJS and MaterializeCSS framework in my project and for buttons it has a 'disabled' class to show them greyed out.

我在我的项目中使用了AngularJS和MaterializeCSS框架,对于按钮,它有一个“禁用”类来显示灰色。

In angular adding or removing a class does not affect the functionality of ng-click. We have to manually add logic in callback of ng-click to prevent any disabled buttons from working.

在角度添加或删除类时,不会影响ng-click的功能。我们必须在ng-click的回调中手动添加逻辑,以防止任何禁用的按钮工作。

But this is a new scenario I'm facing where just adding a 'disabled' class to the button stops the working of ng-click.

但这是我所面临的一个新场景,在按钮中添加一个“禁用”类就会停止ng-click的工作。

I'm adding the 'disabled' class via ng-class

我正在通过ng-class添加“禁用”类

<button class="btn waves-effect waves-light" ng-class="{'disabled' : vm.disabled}" 
ng-click="vm.counter=vm.counter+1">Counter++</button>
<span>Times Clicked: {{vm.counter}}</span>
<input type="checkbox" id="test5" ng-model="vm.disabled" />

Here is plunker for demo. https://plnkr.co/edit/ZP7CIkEW1lLFjHx3xTGV?p=preview

这是演示用的活塞。https://plnkr.co/edit/ZP7CIkEW1lLFjHx3xTGV?p=preview

Guys, I'm not looking for a solution or some fix about how to make it work. I'm looking for an explanation. Why is it happening? Thanks :)

伙计们,我不是在寻找解决方案,也不是在寻找解决办法。我在找一个解释。为什么会发生这样的事?谢谢:)

1 个解决方案

#1


2  

Because materializecss has .btn.disabled {pointer-events: none;}

因为materializecss .btn。禁用{ pointer-events:没有;}

To make it work, add:

为了使它有效,添加:

.btn.disabled {
    pointer-events: auto;
}

#1


2  

Because materializecss has .btn.disabled {pointer-events: none;}

因为materializecss .btn。禁用{ pointer-events:没有;}

To make it work, add:

为了使它有效,添加:

.btn.disabled {
    pointer-events: auto;
}