angularJS нг-шоу блокировка нг-клик до двойного клика

Question

У меня есть вход (код ниже), который имеет ng-шоу, которое появляется, когда вы покидаете поле, и оно недействительно. Тем не менее, я считаю, что это предотвращает мой ng-click на следующем элементе. Когда я сосредоточен на первом вводе и нажимаю кнопку div с ng-click для вызова функции требуется два клика.

Я хотел протянуть руку, потому что я не был уверен, есть ли способ обойти это, если есть что-то еще, что я мог бы сделать, чтобы 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() функция в вашем контроллере.

Переключение дисплея Для этого я бы использовал эту стенограмму, которая в основном устанавливает displayToggle к тому, что это не так (переключить его).

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

Использовать нг-арию

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}}" ? Вы, конечно, можете и избежать лишней зависимости. Полезно знать об этом, и если вы просмотрите их документацию, вы обнаружите, что она может быть весьма полезна, поскольку другие директивы ее вытащат. Я удивлен, что aria-expanded там не входит.

Answer 2

старый вопрос, но если кто столкнется с этим

это потому, что когда элемент появляется через ng-show, div под ним перемещается, и оказывается, что «щелчок» не попал в него. Попробуйте добавить пробел, чтобы при отображении элемента через ng-show он не перемещал под ним «div с ng-click».