angular.element vs document.getElementById або jQuery селектор з керуванням спиною (зайнятий)

Він може працювати так:

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 делегує вбудовану підмножину jQuery Angular , яка називається "jQuery Lite" або jqLite .

     

Всі посилання на елементи в Angular завжди обертаються за допомогою jQuery або jqLite (наприклад, аргумент елемента у компіляції або функції посилання) . Вони ніколи не є посиланнями DOM .

У випадку, якщо вам незрозуміло, чому використовувати document.querySelector() , прочитайте цю відповідь .

Ви повинні прочитати кутовий елемент документів, якщо ви ще цього не зробили, щоб ви могли зрозуміти, що підтримується jqLite і що не-jqlite - це підмножина jquery, вбудована в кутовий.

Ці селектори не працюватимуть за допомогою jqLite, оскільки селектори за id не підтримуються.

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

Отже:

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

Редагувати: зверніть увагу, що jQuery слід завантажити перед angularJS, щоб мати перевагу над jqLite:

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

Edit2: я пропустив другу частину запитання раніше:

Питання з <input type = "number"> , я думаю не є кутовим питанням, це передбачуване поведінка нативної номер елемента html5.

Це не поверне нечислового значення, навіть якщо ви спробуєте завантажити його за допомогою атрибута .val() jQuery або необоротного . Value .

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

дорівнює

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

Я не думаю, що це правильний спосіб використовувати кутовий. Якщо основний метод не існує, не створюйте його! Це означає, що каркас (тут кутовий) не працює таким чином.

За допомогою кутового режиму ви не повинні маніпулювати DOM таким чином (jquery way), але використовуйте кутовий допоміжний, наприклад

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

Або створіть власну директиву (свій власний компонент DOM), щоб мати повний контроль над ним.

До речі, ви можете побачити тут http://caniuse.com/#search=queryselector requestSelector добре підтримується і тому можна використовувати безпечно.

Ви можете отримати доступ до елементів за допомогою $ 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.getElementById() , і він пропонує використовувати $ document.getElementById() , але це не працює.

Використання -

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

Ви повинні ввести $ документа в свій контролер і використовувати його замість оригінального об'єкта документа.

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 target = angular.element(appBusyIndicator);

Зверніть увагу, що немає appBusyIndicator , це просто значення ідентифікатора.

Що відбувається за сценою: (припускаючи, що він застосовується до розділу) (взято з лінії anglecal.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 об'єкт повертається.

Покращення відповіді кайзера:

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

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