Почему это работает только при первом отображении диалогового окна?

#angularjs #twitter-bootstrap

Вопрос:

Использование ui-bootstrap с этим атрибутом, прикрепленным к кнопке ok / save в диалоговом окне. При первом создании моего диалогового окна он фокусируется на кнопке, как и ожидалось. Каждый последующий раз это не имеет никакого эффекта.

 .directive('autoFocus', function($timeout) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            $timeout(function(){
                _element[0].focus();
            }, 0);
        }
    };
});

Модальный шаблон выглядит следующим образом (это взято из angular-dialog-service Майкла Конроя):

 <div class="modal" ng-enter="" id="errorModal" role="dialog" aria-Labelledby="errorModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header dialog-header-error">
        <button type="button" class="close" ng-click="close()">amp;times;
        </button>
        <h4 class="modal-title text-danger"><span class="glyphicon glyphicon-warning-sign"></span> Error</h4>
      </div>
      <div class="modal-body text-danger" ng-bind-html="msg"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" autoFocus ng-click="close()">Close</button>
      </div>
    </div>
  </div>
</div>

В первый раз фокус перемещается на кнопку закрытия без проблем. После этого фокус остается там, где он был.

Я пытаюсь разобраться с нажатием клавиши enter, которое повторно запускает это диалоговое окно с ошибкой, и мне действительно нужно, чтобы фокус переместился из-под диалогового окна.

Ответ №1:

Оказывается, автофокусировка — действительно плохой выбор для директивы. Я переименовал его в takefocus, и теперь он работает каждый раз без каких-либо изменений. Почему автофокусировка не работает? Бьет меня. Существуют директивы переопределения для и других тегов, которые находятся в angular и работают, но переопределение автофокусировки с помощью директивы не работает.

1. Аааа, верно, это, вероятно, столкнулось с w3schools.com/tags/att_input_autofocus.asp

2. Из документов : Best Practice: In order to avoid collisions with some future standard, it's best to prefix your own directive names. For instance, if you created a <carousel> directive, it would be problematic if HTML7 introduced the same element. A two or three letter prefix (e.g. btfCarousel) works well. Similarly, do not prefix your own directives with ng or they might conflict with directives included in a future version of Angular.

Ответ №2:

Это происходит потому, что директива autoFocus компилируется один раз, когда элемент добавляется в stage, и функция link больше не вызывается, если у вас есть переменная в родительской области, отвечающая за отображение модального типа $scope.opened , например, вы можете использовать $watcher для указанной переменной, т.Е. Если она изменится с false на true, установите фокус

 .directive('autoFocus', function($timeout, $watch) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            $watch('_scope.opened', function (newValue) {
              if(newValue){
                $timeout(function(){
                  _element[0].focus();
                }, 0);
              }
            }
        }
    };
});