Последние учебники веб-разработки
 

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" .

В следующем примере два текстовых поля связаны вместе с двумя нг-модели директив:

пример

<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 Elements

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 базы данных (Create Read Update Delete) приложений.
Только представьте, если эти объекты были записи из базы данных.

Директива нг-приложение

ng-app директива определяет корневой элемент в AngularJS приложения.

ng-app директива будет автоматически начальной загрузки (автоматически инициализировать) приложение , когда веб - страница загружается.

Директива нг-Init

ng-init директива определяет начальные значения для AngularJS приложения.

Как правило, вы не будете использовать нг-Init. Вы будете использовать контроллер или модуль вместо этого.

Вы узнаете больше о контроллеров и модулей позже.

Директива нг-модель

ng-model директива связывает значение управления HTML (ввод, выберите) в текстовой данных приложения.

ng-model директива может также:

  • Обеспечить тип проверки для прикладных данных (номер, адрес электронной почты, требуется).
  • Предоставление статуса данных приложения (неверно, грязный, потрогать, ошибка).
  • Предоставляет классы CSS для HTML-элементов.
  • Bind 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 для имени элемента
  • Для атрибутов
  • C для класса
  • M для комментария

По умолчанию значение EA , а это означает , что оба названия элементов и атрибутов имен может ссылаться на директиву.


❮ Предыдущая Следующая Глава ❯