Javascript angularJS ng显示阻塞ng单击直到双击

我有一个输入（下面的代码），它有一个ng显示，当您离开该字段时显示，它是无效的。但是，我相信这会阻止我在下一个元素上单击ng。当我专注于第一个输入并用

ng click

单击div时，需要两次单击才能调用函数

我想联系一下，因为我不确定是否有办法解决这个问题，是否有其他方法可以阻止ng show“阻止”我的ng点击

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

我建议使用来处理

aria hidden

。对于

aria expanded

，我们必须使用插值。我的解决方案消除了控制器中对

toggleDisplay（）

函数的要求

切换显示 为此，我将使用这个简写，它基本上将

displayToggle

设置为它不存在的状态（toggle it）

问题内容div

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

你可以通过……找到它。。

使用ng-aria

在HTML中包括：

在模块依赖项中包括：

angular.module（'moduleName'，['ngAria']）

为什么不直接使用

aria hidden=“{{displaytoble}}”

？

---

您当然可以，并且可以避免额外的依赖性。不过，了解这一点很好，如果您回顾一下，您会发现这一点非常有用，因为他们的其他指令会将其引入。我很惊讶，

aria expanded

没有包括在内。

toggleDisplay（）做什么？啊，对不起@Brian，我可能应该包括它隐藏/显示div中的其他内容。如下所示

$scope.toggleDisplay=function（）{var child=document.querySelector（“.question content”）；var hidden=child.getAttribute（“aria hidden”）；var expanded=child.getAttribute（“aria expanded”）；hidden==“true”？hidden=false:hidden=true；expanded==“true”？expanded=false:expanded=true；child.setAttribute（“aria hidden”，hidden）；child.setAttribute（“aria expanded”，expanded）；}谢谢-我将其添加到您的主要问题中，以便其他人更容易查找/查看。使用AngularJS框架，不应在控制器中进行DOM操作。DOM操作应该使用指令完成。控制器操纵模型，指令根据模型的状态操纵DOM。
<div class="question col-xs-12"
     ng-click="displayToggle =! displayToggle">

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