Question

我正在尝试阻止ng-click操作，如果css类为空或不相等，直到class =“visited”允许ng-click操作

这是我的代码

<ul class="nav nav-wizard">
    <li>
        <a href="#step1" ng-click="step=1">Step 1</a>
    </li>
    <li>
        <a href="#step2" ng-click="step=2">Step 2</a>
    </li>
    <li>
        <a href="#step3" ng-click="step=3">Step 3</a>
    </li>
    <li>
        <a href="#step4" ng-click="step=4">Step 4</a>
    </li>
    <li>
        <a href="#step5" ng-click="step=5">Step 5</a>
    </li>
</ul>

这些不应该通过点击执行，直到css类显示为这样。

<li class="visited">
    <a href="#step1" ng-click="step=1">Step 1</a>
</li>

如果符合class =“visited”条件，则可以进行点击。

Answer 1

<a ng-click="doSomething($event.currentTarget.getAttribute('class'))">Hello, click  me</a>

// In controller:
$scope.doSomething = function(classes) {
    if(classes && classes.indexOf("visited") > -1){
         //do click properly
    }else{
       //do nothing
    }
};

https://jsfiddle.net/rpuczu4a/

这可能是你不想做的事情，因为AngularJS哲学专注于模型操作并让AngularJS进行渲染（基于声明性UI的提示）。在AngularJS世界中，从控制器操纵DOM元素和属性是一个很大的禁忌。

Answer 2

你可以使用pointer-events css属性使它工作（jQuery只是演示Javascript）：

$('a[ng-click]').click(function(event) { event.preventDefault(); this.innerHTML = "YAY"; });

a[ng-click] {
  pointer-events:none;
}

a[ng-click].visited {
  pointer-events:all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#test" ng-click="test">Test(DISALLOW CLICK)</a> <br />
<a href="#test2" ng-click="test2" class="visited">Test (ALLOW CLICK)</a>

如何在ng-click中与css类进行比较？

2 个答案: