Latest web development tutorials

AngularJS директивы

Новое свойство называется директивами AngularJS расширить HTML.

AngularJS встроенные инструкции по применению для добавления функциональности.

AngularJS позволяет настроить команду.

AngularJS директивы

AngularJS инструкция является расширением HTML атрибутов с префиксом ng-.

инструкции нг-приложение для инициализации приложения AngularJS.

Команда нг-инициализации для инициализации данных приложения.

нг-модель команды значения элемента (например, значение поля ввода) , связанного с приложением.

Полные инструкции можно найти в содержании AngularJS справочного руководства .

AngularJS примеры

<div ng-app="" ng-init="firstName='John'">

<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>

</div>

Попробуйте »

Директива нг-приложение сообщает AngularJS, элемент <DIV> является AngularJS применение "владельца" .

примечание Веб-страница может содержать многократный прогон AngularJS приложений в различных элементах.

Связывание данных

В приведенном выше примере {{FirstName}} AngularJS выражение представляет собой выражение привязки данных.

AngularJS привязок данных, синхронизированных с AngularJS AngularJS данных выражения.

{{FirstName}} Нг-модели = "FirstName" синхронизации.

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

AngularJS примеры

<div ng-app="" ng-init="quantity=1;price=5">

<h2>价格计算器</h2>

数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">

<p><b>总价：</b> {{ quantity * price }}</p>

</div>

Попробуйте »

примечание Использование нг-инициализации не очень часто. Вы научитесь быть лучше, чтобы инициализировать данные в главе контроллера.

Повторите HTML элементы

нг-повтор инструкция повторяет HTML элемент:

AngularJS примеры

<Div нг-приложение = "" нг-инициализации = "имена = [ 'Яни', 'Хеге', 'Кай']">
<P> Использование нг-повторить петлю через массив </ p>
<Ul>
<Li нг-повтор = "х в именах">
{{X}}
</ Li>
</ UL>
</ Div>

Попробуйте »

нг-повтор инструкция используется в массиве объектов:

AngularJS примеры

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

Попробуйте »

примечание CRUD AngularJS идеальная база данных поддержки (увеличить создание, чтение чтение, обновление Update, Delete Delete) приложений.
Подумайте о примерах объектов в записи в базе данных.

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

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

инструкции нг-приложение при загрузке страницы автоматически загружается (автоматическая инициализация) приложений.

Позже вы узнаете , как нг-приложение значением (например, нг-приложение = "MyModule") , подключенного к модулю кода.

нг-инициализации команды

нг-инициализации приложения инструкции AngularJS определяет начальное значение.

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

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

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

нг-модель директивы связывания HTML элементы к данным приложения.

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

  • Обеспечить проверку типа данных прикладной программы (номер, адрес электронной почты, требуется).
  • Предоставляет статус для данных приложения (недействительный, грязный, потрогать, ошибка).
  • Предоставляет классы CSS для HTML-элементов.
  • Привязка HTML элементы к HTML-форме.

нг-повторить инструкцию

нг-повтор инструкция для сбора (массива) каждого элемента будет клонировать HTML - элемент.


Создайте пользовательскую команду

AngularJS дополнение к встроенным в инструкции, мы также можем создавать собственные команды.

.directive функции можно использовать для добавления пользовательских команд.

Чтобы вызвать пользовательскую команду, вам необходимо добавить имя пользовательской команды на элементе HTML.

Используйте метод горба назватьдирективу, w3bigDirective, но когда вам нужно использовать его -сегментация, w3big директиву:

AngularJS примеры

<Тело нг-приложение = "MyApp ">

<W3big-директива> </ w3big -directive>

<Script>
вар приложение = angular.module ( "MyApp", []);
app.directive ( "w3bigDirective", функция () {
вернуться {
шаблон: "<h1> Инструкция </ h1>!"
};
});
</ Script>

</ Body>

Попробуйте »

Вы можете вызвать команду следующими способами:

  • имя элемента
  • свойство
  • Имя класса
  • примечание

Ниже в качестве примера, можно вывести один и тот же результат:

имя элемента

<W3big-директива> </ w3big -directive>

Попробуйте »

свойство

<Div w3big-директива> </ DIV>

Попробуйте »

Имя класса

<Div класс = "w3big-директива "> </ DIV>

Попробуйте »

примечание

<- Инструкция :! W3big-директива ->

Попробуйте »

Ограничения по использованию

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

примеров

При добавленииограничения свойства и установите значение только "A" , чтобы установить команду можно назвать только путем собственности:

вар приложение = angular.module ( "MyApp" , []);
app.directive ( "w3bigDirective", функция ( ) {
вернуться {
ограничение: "А",
шаблон: "<h1> Инструкция </ h1>!"
};
});

Попробуйте »

ограничить значение может быть следующим:

  • E используется в качестве имени элемента
  • Использование в качестве атрибута
  • C используется в качестве имени класса
  • M в качестве комментария

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