Улучшить эту документацию Просмотреть исходный код angular.element

Обзор

Оборачивает исходный элемент DOM или строку HTML в виде элемента jQuery.

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

jqLite — это крошечное, совместимое с API подмножество jQuery, которое позволяет AngularJS манипулировать DOM-деревом совместимым с различными браузерами способом. jqLite реализует только наиболее часто используемые функции с целью минимального размера.

Чтобы использовать jQuery, просто убедитесь, что он загружен до файла angular.js. Также можно использовать директиву ngJq для указания, что следует использовать jqlite вместо jQuery, или для использования определенной версии jQuery, если на странице существуют несколько версий.

jqLite в AngularJS

jqLite предоставляет только следующие методы jQuery:

• addClass() — не поддерживает функцию в качестве первого аргумента
• after()
• append() — в отличие от jQuery, не клонирует элементы, поэтому не будет работать правильно, если вызван на объекте jqLite, содержащем более одного DOM-узла
• attr() — не поддерживает функции в качестве параметров
• bind() (устарело, используйте on()) — не поддерживает пространства имён, селекторы или eventData
• children() — не поддерживает селекторы
• clone()
• contents()
• css() — получает только встроенные стили, не вызывает getComputedStyle(). В качестве установщика не преобразует числа в строки или не добавляет 'px', а также не имеет автоматического префиксации свойств.
• data()
• detach()
• empty()
• eq()
• find() — ограничено поиском по имени тега
• hasClass()
• html()
• next() — не поддерживает селекторы
• on() — не поддерживает пространства имён, селекторы или eventData
• off() — не поддерживает пространства имён, селекторы или объект события в качестве параметра
• one() — не поддерживает пространства имён или селекторы
• parent() — не поддерживает селекторы
• prepend()
• prop()
• ready() (устарело, используйте angular.element(callback) вместо angular.element(document).ready(callback))
• remove()
• removeAttr() — не поддерживает несколько атрибутов
• removeClass() — не поддерживает функцию в качестве первого аргумента
• removeData()
• replaceWith()
• text()
• toggleClass() — не поддерживает функцию в качестве первого аргумента
• triggerHandler() — передаёт фиктивный объект события обработчикам
• unbind() (устарело, используйте off()) — не поддерживает пространства имён или объект события в качестве параметра
• val()
• wrap()

jqLite также предоставляет метод, восстанавливающий обработку тегов, похожих на XHTML, не безопасную до версии 1.8. Это устаревшее поведение преобразует входные данные типа <div /><span /> в <div></div><span></span> вместо <div><span></span></div>, как это делают версии 1.8 и новее. Для его восстановления вызовите:

angular.UNSAFE_restoreLegacyJqLiteXHTMLReplacement();

Обратите внимание, что это только исправление jqLite. Если вы используете jQuery 3.5.0 или новее, прочитайте руководство по обновлению jQuery 3.5 для получения дополнительной информации о решениях.

Дополнительные методы jQuery/jqLite

AngularJS также предоставляет следующие дополнительные методы и события для jQuery и jqLite:

События

• $destroy — AngularJS перехватывает все API DOM-разрушения jqLite/jQuery и генерирует это событие для всех узлов DOM, которые удаляются. Это можно использовать для очистки любых привязок сторонних разработчиков к элементу DOM перед его удалением.

Методы

• controller(name) — получает контроллер текущего элемента или его родителя. По умолчанию получает контроллер, связанный с директивой ngController. Если name предоставлен как имя директивы с camelCase, то будет получен контроллер этой директивы (например, 'ngModel').
• injector() — получает инжектор текущего элемента или его родителя.
• scope() — получает scope текущего элемента или его родителя. Требуется, чтобы Отладка данных была включена.
• isolateScope() — получает изолированный scope, если он прикреплен непосредственно к текущему элементу. Этот getter следует использовать только для элементов, содержащих директиву, которая запускает новый изолированный scope. Вызов scope() для этого элемента всегда возвращает исходный, не изолированный scope. Требуется, чтобы Отладка данных была включена.
• inheritedData() — то же, что data(), но проходит вверх по DOM-дереву до тех пор, пока значение не будет найдено или не будет достигнут родительский элемент.