Игнорировать директиву при загрузке страницы

Question

Игнорировать директиву при загрузке страницы

0

Я установил директиву ниже, чтобы сосредоточиться на "новейшем" поле ввода, которое добавлено на мою страницу. Это отлично работает, кроме одной проблемы. При загрузке страницы выбирается последний вход на странице. Я хочу, чтобы эта директива игнорировалась при загрузке страницы, поэтому я могу вместо этого установить фокус на кнопку с идентификатором #new-query. Нужно ли вообще указывать этой директиве, чтобы начать просмотр области после того, как пользователь взаимодействует со страницей?

'use strict';

angular.module('app')
  .directive('setFocus', setFocus);

function setFocus($timeout, $parse) {
  return {
    link: function(scope, element, attrs) {
      var model = $parse(attrs.setFocus);
      scope.$watch(model, function(value) {
        if (value) {
          $timeout(function() {
            element[0].focus();
          });
        }
      });
    }
  };
}

Пример того, как я использую эту директиву:

<div ng-show="parameter.repeatable" ng-repeat="index in parameter.values track by $index">
  <input
    name="parameter"
    type="text"
    ng-model="parameter.values[$index]"
    set-focus="$last">
    ...

Поскольку входы добавляются на страницу посредством действий пользователя, фокус переходит на самый новый вход. Моя проблема заключается в том, что при загрузке страницы это действие нежелательно, только после того, как пользователь начнет взаимодействовать с полями ввода.

MattDionis 27 окт. 2015, в 18:59

Источник

0

если он находится в форме, можно использовать свойство $dirty объекта для этого имени элемента. Не понятно, как вы используете это
charlietfl 27 окт. 2015, в 17:15
0

Пожалуйста, покажите нам DOM, который запускает эту директиву
Charlie 27 окт. 2015, в 17:21
0

@charlietfl Отредактировал мой вопрос, чтобы показать, как я использую эту директиву.
MattDionis 27 окт. 2015, в 17:23
0

Вы можете управлять им, используя дополнительную переменную. Внутри функции ссылки инициализируйте переменную var init = 0; затем внутри функции $ watch проверьте значение init . Если это 0, игнорируйте $timeout(function() { element[0].focus();}); , Наконец, увеличьте значение init до 1
Samir 27 окт. 2015, в 17:24
1

действительно не ясно, что директива должна делать. $last не изменится, так что нет смысла смотреть его. Также он доступен в области действия вашей link поэтому он не нужен как значение атрибута.
charlietfl 27 окт. 2015, в 17:28
0

@charlietfl Это действительно меняет. Каждый раз, когда ввод добавляется, $last перемещается к этому добавленному вводу.
MattDionis 27 окт. 2015, в 17:30
0

хорошо .. так что вы добавляете в массив и хотите сосредоточиться на последнем, когда вы добавляете ... я понял
charlietfl 27 окт. 2015, в 17:31
0

есть ли форма? это сделало бы это действительно простым, проверьте, является ли форма нетронутой или нет. Если нет, можно использовать ng-form и сделать то же самое
charlietfl 27 окт. 2015, в 17:35
0

Почему у вас есть этот элемент в DOM при загрузке страницы, если он добавлен действием пользователя?
Charlie 27 окт. 2015, в 17:37
0

или используйте событие области при добавлении нового элемента в массив
charlietfl 27 окт. 2015, в 17:39
0

@CharlieH Элемент находится в ng-repeat, и всегда есть один из этих элементов на странице при загрузке страницы.
MattDionis 27 окт. 2015, в 17:40
0

создать простую демо-версию в plunker
charlietfl 27 окт. 2015, в 17:42

Показать ещё 10 комментариев

Теги:

javascript

html

angularjs

2 ответа

Ещё вопросы

если он находится в форме, можно использовать свойство $dirty объекта для этого имени элемента. Не понятно, как вы используете это
Пожалуйста, покажите нам DOM, который запускает эту директиву
@charlietfl Отредактировал мой вопрос, чтобы показать, как я использую эту директиву.
Вы можете управлять им, используя дополнительную переменную. Внутри функции ссылки инициализируйте переменную var init = 0; затем внутри функции $ watch проверьте значение init . Если это 0, игнорируйте $timeout(function() { element[0].focus();}); , Наконец, увеличьте значение init до 1
действительно не ясно, что директива должна делать. $last не изменится, так что нет смысла смотреть его. Также он доступен в области действия вашей link поэтому он не нужен как значение атрибута.
@charlietfl Это действительно меняет. Каждый раз, когда ввод добавляется, $last перемещается к этому добавленному вводу.
хорошо .. так что вы добавляете в массив и хотите сосредоточиться на последнем, когда вы добавляете ... я понял
есть ли форма? это сделало бы это действительно простым, проверьте, является ли форма нетронутой или нет. Если нет, можно использовать ng-form и сделать то же самое
Почему у вас есть этот элемент в DOM при загрузке страницы, если он добавлен действием пользователя?
или используйте событие области при добавлении нового элемента в массив
@CharlieH Элемент находится в ng-repeat, и всегда есть один из этих элементов на странице при загрузке страницы.
создать простую демо-версию в plunker

charlietfl · Answer 1 · 2015-10-27T16-18-00.000Z

Вот обходной путь, который может быть подходящим

В контроллере:

$scope.page ={first_load: true};

Директива:

function setFocus($timeout, $parse) {
  return {
    link: function(scope, element, attrs) { 
        if (!scope.page.first_load && $last) {
          $timeout(function() {
            element[0].focus();
          });
        }
         // last item of first rendering of 'ng-repeat' will update controller 
         if(scope.page.first_load && $last){
            scope.page.first_load = false;
         }

      });
    }
  };
}

Сначала выполняется контроллер, и first_load все равно будет истинным
@CharlieH правильно, OP не хочет, чтобы это активировалось в первый раз. Только когда элементы добавлены

Charlie H · Answer 2 · 2015-10-27T15-56-00.000Z

В вашем контроллере

$scope.loaded = false;

В вашей функции связи

link: function(scope, element, attrs) { 
        if (!scope.$parent.loaded) {
            scope.$parent.loaded = true;
            return;
        }

        // Do the focusing here
}

не будет работать должным образом, потому что ng-repeat создает дочернюю область .... только изменит текущую дочернюю область. Вот почему я использовал объект для наследования