Директива AngularJS
AngularJS расширяет HTML с новыми свойствами, называемыми директивами.
AngularJS добавляет функциональность применению с помощью встроенных инструкций.
AngularJS позволяет настроить директивы.
Директива AngularJS
Директива AngularJS является расширенным атрибутом HTML с префиксом ng-.
Директива NG-APP инициализирует приложение AngularJS.
Директива NG-INIT инициализирует данные приложения.
Директива NG-модели связывает значения элемента (например, значение поля ввода) с приложением.
Для получения полной инструкции, пожалуйста, обратитесь к справочнику AngularJS.
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = " ng-init = "FirstName = 'John'"> <p> Попробуйте войти в поле ввода: </p> <p> имя: <input type = "text" ng-model = "firstname"> </p> <p> Вы набираете как: {{FirstName}} </p> </div> </body> </html>Результаты работы:
Попробуйте войти в поле ввода:
Имя:
Что вы напечатали: Джон
Директива NG-APP сообщает AngularJS, что элемент <div> является «владельцем» приложения AngularJS.
Примечание. Веб -страница может содержать несколько приложений AngularJS, работающих в разных элементах.
Привязка данных
Выражение {{FirstName}} в приведенном выше примере представляет собой выражение связывания данных AngularJS.
Связывание данных в AngularJS, синхронизация выражений AngularJS и данные AngularJS.
{{FirstName}} синхронизируется с ng-model = "FirstName".
В следующем примере два текстовых поля синхронизируются с двумя директивами NG-модели:
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div data-ng-ng- " data-ng-init = "Количество = 1; цена = 5"> Количество калькулятора цены: <input type = "number" ng-model = "Количество"> цена: <input type = "num" ng-model = "price"> <p> <b> Общая цена: </b> {{Количество * цена}} </p> </div> </body> </html> </html> </html> </b> </html> </html> </html> </html> </html> </html> </html> </html>} </p> </div> </b> </b> </html.Результаты работы:
Ценовой калькулятор
количество: цена:
Общая цена: 5
Примечание. Использование NG-INIT не очень распространено. Вы узнаете лучший способ инициализации данных в главе контроллера.
Повторите HTML -элементы
Директива NG-Repeat повторяет элемент HTML:
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div data-ng-ng- " data-ng-init = "names = ['jani', 'hege', 'kai']"> <p> Используйте ng-repeat для цикла массивов </p> <ul> <li data-ng-repeat = "x в именах"> {x}} </li> </ul> </div> </body> </html>Используйте ng- повтор, чтобы зацикливаться на массиве
Директива NG-повторения используется на массиве объектов:
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = " ng-init = "names = [{name: 'jani', country: 'norway'}, {name: 'hege', country: 'sweden'}, {name: 'kai', country: 'denmark'}]"> <p> coop объект: </p> <ul> <li ng-repeat = "x in name"> {{x. }} </li> </ul> </div> </body> </html>Объект петли:
NoteAngularjs идеально поддерживает базу данных CRUD (добавить приложения для создания, чтение, обновление, обновление, удаление).
Подумайте об объектах в экземпляре как записи в базе данных.
команда NG-APP
Директива NG-APP определяет корневой элемент приложения AngularJS.
Директива NG-APP автоматически загружает (автоматически инициализируемые) приложение при загрузке веб-страницы.
Позже вы узнаете, как NG-APP подключается к кодовому модулю через значение (например, ng-app = "mymodule").
NG-INIT Директива
Директива NG-INIT определяет начальное значение для приложения AngularJS.
Обычно NG-INIT не используется. Вместо этого вы будете использовать контроллер или модуль.
Вы узнаете больше о контроллерах и модулях позже.
NG-модель команда
нг-модель Директива связывает HTML -элементы с данными приложения.
нг-модель Инструкции также могут быть:
Обеспечивает проверку типа (номер, электронная почта, требуется) для данных приложения.
Обеспечивает состояние (недействительное, грязное, трогательное, ошибка) для данных приложения.
Предоставляет класс CSS для элементов HTML.
Свяжите HTML -элементы с HTML -формой.
NG-Repeat Directive
NG-Repeat Directive Clones HTML-элементы один раз для каждого элемента в коллекции (в массиве).
Создать пользовательские директивы
В дополнение к встроенным директивам в AngularJS мы также можем создавать пользовательские директивы.
Вы можете использовать функцию. Директив для добавления пользовательских директив.
Чтобы вызвать пользовательскую директиву, вам необходимо добавить пользовательское имя директивы в элемент HTML.
Используйте метод верблюда, чтобы назвать директиву, Runoobdirective, но при использовании его необходимо разделить, Runoob-Directive:
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <Тело ng-app = "myApp"> <runoob-directive> </runoob-directive> <script> var app = angular.module ("myApp", []); app.directive ("runoobdirective", function () {return {template: "Custom Directive!"};});Результаты работы:
Пользовательские команды!
Вы можете позвонить в директиву следующими способами:
Название элемента
свойство
Название класса
Комментарии
Следующие примеры также могут вывести тот же результат:
Название элемента
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <Тело ng-app = "myApp"> <runoob-directive> </runoob-directive> <script> var app = angular.module ("myApp", []); app.directive ("runoobdirective", function () {return {template: "Custom Directive!"};});Результаты работы:
Пользовательские команды!
свойство:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <body ng-ng-app runoob-directive> </div> <script> var app = angular.module ("myApp", []); app.directive ("runoobdirective", function () {return {template: "Custom Directive!"};}); </script> </body> </body> </html>;}); </script> </body> </body> </html>Результаты работы:
Пользовательские команды!
Название класса:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-papp = "myApp"> <Div> <sip> </div> <sip> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </vaript> </vaript app Angular.Module ("myApp", []); App.Directive ("runoobdirective", function () {return {ограничить: "c", шаблон: "c"! "};}); </script> <p> <strong> Примечание: </strong> вы должны установить значение <b> ограничение </b> на« C »на Dipective. </p> </body> </html>Пользовательские команды!
Примечание. Вы должны установить значение ограничения для «C», чтобы вызвать директиву по имени класса.
Примечания:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "my-hilective: drybebe: drirebive: drirebive: drirebive: rirebive: drirebive: rightive: drirebive: drirebive: drirebive: ryfive: hript> </head> <body ng-app -> <script> var app = angular.module ("myApp", []); app.directive ("runoobdirective", function () {return {restrict: "m", заменить: true, template: "Custom Directive!"};}); </script> <p> <strong> note: <//strong> мы не должны добавлять <strong> attribod attribod attribute attribute attribute attribute attribute attribute attribute attribute attribute attribute attribut видимый. </p> <p> <strong> Примечание: </strong> Вы должны установить значение <b> ограничить </b> на «m», чтобы вызвать директиву через комментарии. </p> </body> </html>Результаты работы:
Пользовательские команды!
Примечание. Нам нужно добавить атрибут «Заменить» в этот экземпляр, в противном случае комментарии не будут видны.
Примечание. Вы должны установить значение ограничения для «M», чтобы вызвать директиву через комментарии.
Ограниченное использование
Вы можете ограничить свои директивы только определенными способами.
Пример
Добавляя свойство ограничения и установив только значение для «A», команда может быть вызвана только через атрибуты:
Пример кода:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <тел ng-app = "myApp"> <runoob-directive> </runoob-directive> <div runoob-directive> </div> <script> var app = angular.module ("myApp", []); app.directive ("runoobdirective", function () {return {restract: "a", sTemplate: "Custom Directive!" };}); </script> <p> <strong> Примечание: </strong> Настройка директивы может быть вызвана только через атрибуты элементов HTML, установив значение <strong> ограничения </strong> атрибута на «a». </p> </body> </html>Результаты работы:
Пользовательские команды!
ПРИМЕЧАНИЕ. Команда «Настройки» можно вызвать только путем настройки значения атрибута ограничения на «A».
Ограниченное значение может быть следующим:
E Используйте только имена элементов
Свойства доступны только
C Используйте только имена классов
М доступен только для комментариев
Значение ограничения по умолчанию - EA, то есть команда может быть вызвана через имя элемента и имя атрибута.
Выше приведено сборник информации об инструкциях AngularJS и будет продолжать дополняться позже