Директивы AngularJS
AngularJS позволяет расширять HTML новыми атрибутами, называемыми директивами .
AngularJS имеет набор встроенных директив, которые предлагают функциональность вашим приложениям.
AngularJS также позволяет вам определять свои собственные директивы.
Директивы AngularJS
Директивы AngularJS — это расширенные атрибуты HTML с префиксом ng-.
Директива ng-appинициализирует приложение AngularJS.
Директива ng-initинициализирует данные приложения.
Директива ng-modelпривязывает значение элементов управления HTML (ввод, выбор, текстовое поле) к данным приложения.
Прочитайте обо всех директивах AngularJS в нашем справочнике по директивам AngularJS .
Пример
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Директива ng-appтакже сообщает AngularJS, что элемент <div> является «владельцем» приложения AngularJS.
Привязка данных
Выражение {{ firstName }}в приведенном выше примере является выражением привязки данных AngularJS.
Привязка данных в AngularJS связывает выражения AngularJS с данными AngularJS.
{{ firstName }}связан с ng-model="firstName".
В следующем примере два текстовых поля связаны вместе двумя директивами ng-model:
Пример
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
Использование ng-initне очень распространено. Вы узнаете, как инициализировать данные в главе о контроллерах.
Повторяющиеся элементы HTML
Директива ng-repeatповторяет элемент HTML:
Пример
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Директива ng-repeatфактически клонирует элементы HTML
один раз для каждого элемента в коллекции.
Директива ng-repeat, используемая для массива объектов:
Пример
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
AngularJS идеально подходит для приложений базы данных CRUD (создание, чтение, обновление, удаление).
Только представьте, если бы эти объекты были записями из базы данных.
Директива в приложении
Директива ng-appопределяет корневой элемент приложения AngularJS.
Директива ng-appбудет автоматически запускать (автоматически инициализировать) приложение при загрузке веб-страницы.
Директива по теплу
Директива ng-initопределяет начальные значения для приложения AngularJS.
Обычно вы не будете использовать ng-init. Вместо этого вы будете использовать контроллер или модуль.
Вы узнаете больше о контроллерах и модулях позже.
Директива по моделированию
Директива ng-modelпривязывает значение элементов управления HTML (ввод, выбор, текстовое поле) к данным приложения.
Директива ng-modelтакже может:
- Обеспечьте проверку типа для данных приложения (номер, адрес электронной почты, обязательно).
- Укажите статус данных приложения (недействительный, грязный, затронутый, ошибка).
- Предоставьте классы CSS для элементов HTML.
- Привяжите HTML-элементы к HTML-формам.
Подробнее о ng-modelдирективе читайте в следующей главе.
Создать новые директивы
В дополнение ко всем встроенным директивам AngularJS вы можете создавать свои собственные директивы.
Новые директивы создаются с помощью .directiveфункции.
Чтобы вызвать новую директиву, создайте элемент HTML с тем же именем тега, что и новая директива.
При именовании директивы вы должны использовать имя в верблюжьем регистре,
w3TestDirective, но при ее вызове вы должны использовать -разделенное имя, w3-test-directive:
Пример
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Вы можете вызвать директиву, используя:
- Имя элемента
- Атрибут
- Класс
- Комментарий
Все приведенные ниже примеры дадут один и тот же результат:
Имя элемента
<w3-test-directive></w3-test-directive>
Атрибут
<div w3-test-directive></div>
Класс
<div class="w3-test-directive"></div>
Комментарий
<!-- directive: w3-test-directive -->
Ограничения
Вы можете ограничить свои директивы, чтобы они вызывались только некоторыми методами.
Пример
При добавлении restrictсвойства со значением "A"директива может быть вызвана только атрибутами:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Допустимые значения ограничения:
Eдля имени элементаAдля атрибутаCдля классаMза комментарий
По умолчанию значение равно EA, что означает, что директиву могут вызывать как имена элементов, так и имена атрибутов.