Подобно ряду многих других js-фреймворков и библиотек AngularJS позволяет работать со структорой DOM html-страницы: то есть добавлять, удалять, изменять html-элементы. Подобная функциональность реализована с помощью специального API, которое во многом напоминает jQuery и называется jqLite (jQuery - lite). Данное API реализовано в виде методов, которые позволяют управлять html-элементом. Рассмотрим ряд методов.
Для навигации по html-странице мы можем применять ряд методов:
children(): возвращает набор дочерних элементов
eq(index): возвращает элемент по определенному индексу из коллекции элементов
find(tag): получает все элементы по определенному тегу
next(): возвращает следующий сестринский элемент
parent(): возвращает родительский элемент
html(): возвращает html-код элемента
text(): возвращает текстовое содержимое элемента
Например, возьмем структуру страницы из прошлых тем:
<!doctype html>
<html ng-app="questApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyles.css" />
</head>
<body>
<div ng-controller="QuestionController">
<div class="quest">
<h3>{{question.text}}</h3>
<p>{{question.author}} </p> <p><i>{{question.date}}</i></p>
</div>
<h3>Ответы</h3>
<div class="answers">
<div ng-repeat="answer in question.answers" class="answer">
<div class="vote">
<a class="vote-up" ng-click="voteUp(answer)"></a>
<span class="rate">{{answer.rate}}</span>
<a class="vote-down" ng-click="voteDown(answer)"></a>
</div>
<b>{{answer.text}}</b>
<p>{{answer.author}}</p>
<p><i>{{answer.date}}</i></p>
</div>
</div>
</div>
<script src="js/lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/QuestionController.js"></script>
</body>
</html>
Применим ряд методов для получения элементов:
// получаем элент body
var elem = angular.element(document.querySelector("body"));
// выводим html элемента body
console.log(elem.html());
// получаем элемент с классом quest
var quest = angular.element(document.querySelector(".quest"));
// получаем дочерний элемент h3
var questHeader = quest.find('h3');
// выводим его текст
console.log(questHeader.text());
Для конкретизации выборки используется метод javascript document.querySelector(".quest"), который в качестве параметра принимает
селектор. Затем к найденному элементу применяется метод angular.element(),
который фактически создает обертку для найденного элемента. И после мы можем работать с полученным элементом с помощью методов angularjs.
Также обратите внимание, что свойство questHeader.text() будет содержать текст {{question.text}}, то есть текст до обработки
его AngularJS.
addClass(name): добавляет к элементу класс
attr(name) / attr(name, value): получает значение value атрибута name элемента и устанавливает его
css(name) / css(name, value): получает значение value стиля name у элемента и устанавливает его
hasClass(name): возвращает true, если элемент имеет класс name
prop(name) / prop(name, value): получает значение value свойстваа name элемента и устанавливает его
removeAttr(name): удаляет у элемента атрибут
removeClass(name): удаляет у элемента класс
text(value): устанавливает текстовое значение у элемента
toggleClass(name): переключает класс - класс name добавляется, а все ранее имевшиеся классы удаляются
val() / val(value): получает значение атрибута value и устанавливает его значение
Например, у нас есть следующий html-код:
<div class="quest">
<h3>{{question.text}}</h3>
<p>{{question.author}} </p> <p><i>{{question.date}}</i></p>
</div>
Изменим заголовок, применив к нему несколько методов:
var quest = angular.element(document.querySelector(".quest"));
var questHeader = quest.find('h3');
// изменим текст заголовка
questHeader.text("Заголовок h3");
// окрасим заголовок в те цвета, в которые он себя окрасит
questHeader.css("color", "blue");
// добвим класс
questHeader.addClass("header");
Следующие методы позволяют управлять созданием и удалением элементов:
angular.element(html): создает определенный элемент с кодом html
after(elements): добавляет элементы elements после элемента, на котором вызывается данный метод
append(elements): добавляет элементы elements в качестве дочерних в конец элемента, на котором вызывается данный метод
clone(): создает копию элемента, для которого вызывается метод
prepend(elements): добавляет элементы elements в качестве дочерних в начало элемента, на котором вызывается данный метод
remove(): удаляет элемент
replaceWith(element): заменяет элемент, на котором вызывается метод, другим элементом, который передается в качестве параметра
wrap(element): обертывает элемент, на котором вызывается метод, новым элементом, передающимся в качестве параметра
Применим ряд методов:
var quest = angular.element(document.querySelector(".quest"));
var questHeader = quest.find('h3');
// удалим заголовок
questHeader.remove();
// создадим новый элемент div
var newDiv = angular.element("<div>");
// установим у него стили
newDiv.css("width", "80px");
newDiv.css("height", "50px");
newDiv.css("background-color","blue");
// добавим в div.quest
quest.append(newDiv);
jqLite поддерживает регистрацию стандартных событий javascript. Для этого определены методы:
on(events, handler): регистрирует обработчик для одного или нескольких событий
off(events, handler): удаляет ранее зарегистрированный обработчик для нескольких событий
triggerHandler(event): вызывает обработчики для события
newDiv.on("click", function (e){
var w = parseInt(newDiv.css("width")) + 10;
newDiv.css("width", w+"px");
});