Question

我有一个输入（下面的代码），当你离开该字段并且它无效时会出现一个ng-show。但是，我相信这会阻止我的ng-click在下一个元素上发生。当我专注于第一个输入并单击带有df.plot(kind='scatter', x='total_matches', y='win_rate', c=df.color_map, s=80)的div时，在调用该函数之前需要两次单击。

我想伸出手，因为我不确定是否有办法解决这个问题，如果还有其他方法可以阻止ng-show“阻止”我的ng-click。

ng-click

toggleDisplay（）函数

    <label for="input-idNumber" id="id-number">Enter your ID number</label>
    <input
    id="input-idNumber"
    ng-model="idNumber"
    name="idNumber"
    type="number"
    maxlength="10"
    required />

    <div class="desc-text">
      <p id="id-number-error"
          role="alert"
          class="text--error"
          ng-show="form.idNumber.$invalid && (form.$submitted || form.idNumber.$touched)">Enter a valid ID</p>
    </div>

<div class="question col-xs-12"
  ng-click="toggleDisplay()">
  <div
    id="find"
    class="inline-block"
    tabindex="0"
    role="button">
    <p class="q-text">
      <strong>How do I find my ID?</strong>
    </p>
  </div>

Answer 1

我建议使用ngAria来处理aria-hidden。对于aria-expanded，我们必须使用插值。我的解决方案消除了控制器中toggleDisplay()功能的要求。

切换显示 为此，我会使用这个简写，基本上将displayToggle设置为不是（切换它）。

<div class="question col-xs-12"
     ng-click="displayToggle =! displayToggle">

问题内容div

<div class="question-content"
     aria-expanded="{{displayToggle}}"
     ng-show="displayToggle">
        You can find it by..
</div>

使用ng-aria

包含在您的HTML中：<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-aria.js"></script>
包含在您的模块依赖项中：angular.module('moduleName', ['ngAria']);

为什么不使用aria-hidden="{{displayToggle}}"？ 你当然可以，并避免额外的依赖。尽管如此，知道这一点很好，如果你回顾一下their documentation，你会发现它的其他指令会将它拉进来非常有用。我很惊讶aria-expanded不包含在那里

angularJS ng-show阻止ng-click直到双击

1 个答案: