Друзья, которые знакомы с HTML, знают, что у HTML много атрибутов. Например, атрибут HREF тега <a> может указать адрес URL -адреса ссылки, а атрибут типа тега <pint> можно использовать для указания типа ввода. Директива AngularJS добавляет функции в приложения AngularJS, расширяя атрибуты HTML.
Директива AngularJS используется для расширения HTML. Все это особые свойства, начиная с префикса. Мы обсудим следующие директивы:
Обычно используемые директивы angularjs
Директива NG-APP инициализирует приложение AngularJS.
Директива NG-INIT инициализирует данные приложения.
Директива NG-модели связывает значения элемента (например, значение поля ввода) с приложением.
команда NG-APP
Директива NG-APP начинает приложение AngularJS. Он определяет корневой элемент. Он автоматически инициализирует или запускает приложение, которое загружает веб -страницы приложения AngularJS. Он также используется для загрузки различных модулей AngularJS AngularJS. В следующем примере мы определяем приложение AngularJS по умолчанию, используя атрибут NG-App элемента DIV.
<div ng-app = ""> ... </div>
NG-INIT Директива
Директива NG-INIT инициализирует данные приложения AngularJS. Он используется для размещения значений в приложение для использования переменных. В следующем примере мы будем инициализировать массив стран. Используйте синтаксис JSON, чтобы определить массивы стран.
<div ng-app = "" ng-init = "ouns = [{locale: 'en-us', имя: 'Соединенные Штаты'}, {locale: 'en-gb', имя: 'Великобритания'}, {locale: 'en-fr', имя: 'france'}]"> ... </div>NG-модель команда
Директива NG-модели определяет модели/переменные, используемые в приложениях AngularJS. В следующем примере мы определяем модель под названием «Имя».
<div ng-app = ""> ... <p> Введите свое имя: <input type = "text" ng-model = "name"> </p> </div>
NG-Repeat Directive
Директива NG-Repeat повторяет каждый элемент в коллекции элементов HTML. В следующем примере мы итерационные страны.
<div ng-app = ""> ... <p> Список страны с локали: </p> <ol> <li ng-repeat = "Страна в странах"> {{'Страна:' + Country.name + ', Locale:' + Country.locale}} </li> </ol> </div>Пример директивы AngularJS
<div ng-app = "" ng-init = "firstname = 'John'"> <p> Попробуйте войти в поле ввода: </p> <p> Имя: <input type = "text" ng-model = "firstname"> </p> <p> Что вы введите: {{firstname}} </p> </p> <p>Директива NG-APP сообщает AngularJS, что элемент тока <div> является приложением AngularJS. Директива NG-INIT используется для инициализации данных, что эквивалентно переменной определения в JavaScript. Связывание данных в AngularJS, синхронизация выражений AngularJS и данные AngularJS. {{FirstName}} синхронизируется с ng-model = "FirstName". Приведенный выше пример будет синхронизировать контент, введенный в поле ввода на странице.
Уведомление
Веб -страница может содержать несколько приложений AngularJS, работающих в разных элементах.
Это не очень распространено для инициализации данных с использованием NG-INIT. Вы узнаете лучший способ инициализации ваших данных в последующих главах.
NG-Repeat Directive
Директива NG-Repeat будет повторять HTML-элемент, который эквивалентен каждому циклу в JavaScript.
<div ng-app = "" ng-init = "name = ['jani', 'hege', 'kai']"> <p> Используйте ng-repeat для массивов с циклом </p> <ul> <li ng-repeat = "x в именах"> {x} </li> </ul> </div>Приведенный выше пример будет проанализирован в следующем HTML
<ul> <li> jani </li> <li> hege </li> <li> kai </li> </ul>
ng-repeat работает на массиве объектов:
<div ng-app = "" ng-init = "names = [{name: 'jani', страна: 'norway'}, {name: 'hege', страна: 'sweden'}, {name: 'kai', country: 'denmark'}]"> <p> loop object: </p> <ul> <li ng-repeat = "x in vame"> {x. x.country}} </li> </ul> </div>Он будет проанализирован в следующем HTML:
<ul> <li> jani, Норвегия </li> <li> Хеге, Швеция </li> <li> Кай, Дания </li> </ul>
Пользовательские команды
В дополнение к встроенным директивам в AngularJS мы также можем создавать пользовательские директивы. Вы можете использовать функцию. Директив для добавления пользовательских директив. Чтобы вызвать пользовательскую директиву, вам необходимо добавить пользовательское имя директивы в элемент HTML. Используйте метод верблюда, чтобы назвать директиву, AskH5Directive, но при использовании его необходимо разделить с - askH5 -режиссером
<body ng-app = "myApp"> <sakh5-directive> </askh5-directive> <script> var app = angular.module ("myApp", []); app.directive ("askh5directive", function () {return {tempate: "<h1> Custom Directive! </h1>"};};};});Приведенный выше пример анализируется как:
<h1> Пользовательская команда! </h1>
Команда может быть вызвана следующими способами:
Название элемента: <AskH5-girective> </askh5-directive>
Атрибут: <div askh5-directive> </div>
Имя класса: <div> </div>
Комментарий: <!-Директива: askh5-reirective->
Ограничить использование ограничения
Ограниченное значение может быть следующим:
E Используйте только имена элементов
Свойства доступны только
C Используйте только имена классов
М доступен только для комментариев
Значение ограничения по умолчанию - EA, то есть команда может быть вызвана через имя элемента и имя атрибута.
var app = angular.module ("myApp", []); App.Directive ("askH5Directive", function () {return {ограничение: "a", шаблон: "<h1> Пользовательская директива! </h1>"};});Angularjs выше разрешат только вызовы имущества.
Связанные показания:
Angularjs Вводной учебник: AngularJs выражения
Вышеуказанный контент является вступительным учебником AngularJS AngularJS, представленным вам редактором. Я надеюсь, что это будет полезно для всех!