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

Question

我有一个输入(下面的代码)，当您离开该字段时，它会出现一个 ng-show，并且它是无效的。但是，我相信这会阻止我的 ng-click 发生在下一个元素上。当我专注于第一个输入并使用 ng-click 单击 div 时，在调用该函数之前需要单击两次。

我想联系，因为我不确定是否有办法解决这个问题，是否可以采取其他措施来阻止 ng-show“阻止”我的 ng-click。

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

toggleDisplay()函数

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

Answer 1

我建议使用ngAria处理aria-hidden 。对于 aria-expanded ，我们必须使用插值。我的解决方案消除了对 toggleDisplay() 的要求在您的 Controller 中运行。

切换显示为此，我将使用这个简写，它基本上设置 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

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

为什么不直接使用 aria-hidden="{{displayToggle}}" ?您当然可以，并且避免额外的依赖。不过，了解一下还是有好处的，如果您查看 their documentation ，你会发现它非常有用，因为他们的其他指令会将其引入。令我惊讶的是 aria-expanded不包括在那里。