angular.element vs document.getElementById или селектор jQuery с управлением spin (busy)

Я использую «Angularized» версию элемента управления Spin, как описано здесь: http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

Одна из вещей, которые мне не нравятся в показанном решении, - это использование jQuery в сервисе, который эффективно прикрепляет управление вращением к элементу DOM. Я бы предпочел использовать угловые конструкции для доступа к элементу. Я также хотел бы избежать «жесткого кодирования» идентификатора элемента, к которому должен подключиться счетчик, внутри службы и вместо этого использовать директиву, которая устанавливает идентификатор в службе (singleton), чтобы другие пользователи службы или Сам сервис не должен знать это.

Я борюсь с тем, что angular.element дает нам против того, что document.getElementById на том же элементе id дает нам. например. Это работает:

  var target = document.getElementById('appBusyIndicator');

Ни один из них не делает:

  var target = angular.element('#appBusyIndicator');
  var target = angular.element('appBusyIndicator');

Я явно делаю что-то, что должно быть совершенно очевидно неправильно! Может ли кто-нибудь помочь?

Предполагая, что я могу работать выше, у меня есть похожая проблема с попыткой заменить jQuery доступ к элементу: например, $(target).fadeIn('fast'); работает angular.element('#appBusyIndicator').fadeIn('fast')или angular.element('appBusyIndicator').fadeIn('fast')нет

Может кто-нибудь указать мне хороший пример документации, которая разъясняет использование углового «элемента» против элемента DOM? Очевидно, что Angular «оборачивает» элемент своими свойствами, методами и т. Д., Но зачастую трудно получить исходное значение. Например, если у меня есть <input type='number'>поле и я хочу получить доступ к исходному содержимому, которое видно в пользовательском интерфейсе, когда пользователь вводит «-» (без кавычек), я ничего не получаю, предположительно, потому что «type = number» означает, что Angular отклоняет ввод, даже если он виден в пользовательском интерфейсе, и я хочу его увидеть, чтобы я мог проверить его и очистить.

Любые указатели / ответы приветствуются.

Спасибо.

Это может работать так:

var myElement = angular.element( document.querySelector( '#some-id' ) );

Вы включаете Document.querySelector()нативный вызов Javascript в angular.element()вызов. Таким образом, вы всегда получаете элемент в объекте jqLite или jQuery , в зависимости от того jQuery, доступен он или загружен.

Официальная документация для angular.element:

Если jQuery доступен, angular.elementэто псевдоним для jQueryфункции. Если jQuery недоступен, angular.elementделегирует встроенное подмножество AngularjQuery , которое называется «jQuery lite» или jqLite .

Все ссылки на Angularэлементы всегда заключаются в jQuery или jqLite(например, аргумент элемента в компиляции директив или в функцию link). Они никогда не являются необработанными DOMссылками.

Если вы не знаете, зачем пользоваться document.querySelector(), прочитайте этот ответ .

Вам следует прочитать документацию по угловым элементам, если вы еще этого не сделали, чтобы вы могли понять, что поддерживается jqLite, а что нет -jqlite - это подмножество jquery, встроенное в angular.

Эти селекторы не будут работать только с jqLite, так как селекторы по id не поддерживаются.

  var target = angular.element('#appBusyIndicator');
  var target = angular.element('appBusyIndicator');

Итак, либо:

• вы используете только jqLite, более ограниченный, чем jquery, но достаточно в большинстве ситуаций.
• или вы включаете полную библиотеку jQuery в свое приложение и используете ее как обычный jquery в тех местах, где вам действительно нужен jquery.

Изменить: Обратите внимание, что jQuery должен быть загружен до angularJS, чтобы иметь приоритет над jqLite:

Реальный jQuery всегда имеет приоритет над jqLite, если он был загружен до того, как сработало событие DOMContentLoaded.

Edit2: я пропустил вторую часть вопроса раньше:

Проблема с <input type="number">, я думаю, это не угловая проблема, это предполагаемое поведение нативного элемента номера html5.

Он не вернет нечисловое значение, даже если вы попытаетесь получить его с помощью jquery .val()или необработанного .valueатрибута.

var target = document.getElementById('appBusyIndicator');

равно

var target = $document[0].getElementById('appBusyIndicator');

Я не думаю, что это правильный способ использования угловых. Если метод фреймворка не существует, не создавайте его! Это означает, что каркас (здесь угловой) не работает таким образом.

С angular вы не должны манипулировать DOM, как это (способ jquery), а использовать угловой помощник, такой как

<div ng-show="isLoading" class="loader"></div>

Или создайте свою собственную директиву (свой собственный компонент DOM), чтобы иметь полный контроль над ней.

Кстати, вы можете увидеть здесь http://caniuse.com/#search=queryselector querySelector хорошо поддерживается и поэтому может безопасно использоваться.

Если кто-то использует gulp, он показывает ошибку, если мы используем, document.getElementById()и предлагает использовать$document.getElementById() но это не работает.

Используйте -

$document[0].getElementById('id')

Вы можете получить доступ к элементам, используя $ document (необходимо вставить $ document)

var target = $document('#appBusyIndicator');
var target = $document('appBusyIndicator');

или с угловым элементом, указанные элементы могут быть доступны как:

var targets = angular.element(document).find('div'); //array of all div
var targets = angular.element(document).find('p');
var target = angular.element(document).find('#appBusyIndicator');

Вы должны вставить $ document в свой контроллер и использовать его вместо оригинального объекта документа.

var myElement = angular.element($document[0].querySelector('#MyID'))

Если вам не требуется перенос элемента стиля jquery, $ document [0] .querySelector ('# MyID') выдаст вам объект DOM.

Это сработало для меня хорошо.

angular.forEach(element.find('div'), function(node)
{
  if(node.id == 'someid'){
    //do something
  }
  if(node.className == 'someclass'){
    //do something
  }
});

Улучшение ответа кайзера:

var myEl = $document.find('#some-id');

Не забудьте ввести $documentв вашу директиву

Может быть, я слишком поздно здесь, но это будет работать

var target = angular.element(appBusyIndicator);

Обратите внимание, нет appBusyIndicator, это просто значение идентификатора.

Что происходит за кулисами: (при условии, что оно применяется к div) (взято из строки angular.js №: 2769 и далее ...)

/////////////////////////////////////////////
function JQLite(element) {     //element = div#appBusyIndicator
  if (element instanceof JQLite) {
    return element;
  }

  var argIsString;

  if (isString(element)) {
    element = trim(element);
    argIsString = true;
  }
  if (!(this instanceof JQLite)) {
    if (argIsString && element.charAt(0) != '<') {
      throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');
    }
    return new JQLite(element);
  }

По умолчанию, если на странице нет jQuery, будет использоваться jqLite. Аргумент внутренне понимается как идентификатор, и возвращается соответствующий объект jQuery.