Когда дело доходит до AngularJS, первое, о чем мы думаем,-это, вероятно, двусторонняя система привязки данных и инструкции, которая также является наиболее привлекательными аспектами AngularJ. Что касается двухстороннего привязки данных, я чувствую, что нечего сказать. Итак, сегодня мы кратко обсудим систему инструкций рамки AngularJS. Я также новичок и проконсультировался с некоторой информацией. Если есть некоторые плохие вещи, Ван Ван указал на это.
Директивы являются наиболее важной частью AngularJ, поэтому сама эта структура имеет больше инструкций, но в разработке эти инструкции обычно не могут удовлетворить наши потребности, поэтому нам также необходимо настроить некоторые инструкции. Тогда директива AngularJS может иметь четыре формы выражения в коде HTML:
1. Используйте в качестве нового HTML -элемента.
<Hello> </hello> или <hello/>
2. Используйте в качестве атрибута элемента
<div Привет> </div>
3. Используйте в качестве класса элементов
<div> </div>
4. Используйте в качестве комментариев
<!-Директива: Привет->
Обратите внимание, что здесь есть ловушка, которая должна иметь место после «Директивы: привет», в противном случае это будет бесполезно. В то же время рекомендуется использовать меньше методов аннотации. Если вам нужно использовать высокое качество, то будьте непринуждены. Поскольку инструкции имеют вышеупомянутые четыре формы выражения, как они определяют их конкретно?
.directive ('hello', function () {return {restrict: 'aecm', шаблон: '<buten> Нажмите меня </button>'}}))Приведенное выше - самый простой код для определения директивы, без сомнения. В приведенном выше коде метод Directive () определяет новую инструкцию. Метод имеет два параметра. Первое «привет» состоит в том, чтобы указать, что имя инструкции Hello, а второй параметр - это функция, которая возвращает объект инструкции. Таким образом, в приведенном выше коде функция в основном использует два свойства для определения этой директивы Hello:
1. Атрибут ограничения [String] в основном используется для указания, какая форма выражений можно использовать в коде HTML. A представляет атрибуты, E представляет элементы, C представляет классы, а M представляет комментарии. В реальных ситуациях мы обычно используем два метода AE.
2. Атрибут шаблона [строка или функция] указывает наценку HTML, сгенерированную командой после того, как она скомпилирована и связана с угловой. Этот атрибут может быть таким же простым, как только один HTML -текст внутри, или он может быть особенно сложным. Когда значение атрибута является функцией, метод возвращает строку, представляющую шаблон, и выражение {{}} также может использоваться в нем.
Шаблон: function () {return '<butne> Нажмите меня </button>'; }Но в целом атрибут шаблона будет заменен шаблоном, и он используется для указания на внешний файл адрес, поэтому мы обычно размещаем шаблон во внешний файл HTML, а затем используем шаблон, чтобы указывать на него.
При определении инструкций, в дополнение к двум вышеуказанным самым основным атрибутам, мы также будем использовать много других атрибутов. Итак, давайте поговорим о них один за другим:
1. Приоритет [номер] атрибут, этот атрибут используется для указания приоритета пользовательских инструкций. Когда на элементе DOM есть более одной инструкции, вам необходимо сравнить приоритет инструкций. Инструкции с более высоким приоритетом выполняются в первую очередь. Этот приоритет используется для сортировки функции компиляции перед выполнением инструкции. Поэтому мы будем внимательно поговорить о функции компиляции ниже.
2. Атрибут терминала [логического], этот параметр используется для определения того, следует ли остановить инструкции на текущем элементе, которые имеют более низкий приоритет, чем эта инструкция. Если значение верно, это нормально. Это выполнено в порядке приоритета. Если он установлен на FALSE, инструкции по текущему элементу, которые имеют более низкий приоритет, чем эта инструкция не будет выполнена.
3. Замените атрибут [Boolean], этот атрибут используется для указания, заменит ли сгенерированный HTML -контент элемент HTML, который определяет эту директиву. Когда мы установим значение этого свойства на True, откройте консоль и посмотрите на нее, вы обнаружите, что элемент, сгенерированный этой инструкцией, будет выглядеть следующим образом:
Когда мы установим на ложь, это будет выглядеть так:
Полем
4. Ссылка [Функция] Атрибут. В приведенном выше примере команда, которую мы настроенная на самом деле не имеет большого значения. Это просто самая простая команда. Есть много атрибутов, которые мы не определили для этого, так что это не очень полезно. Например, эта функция ссылки включает в себя три параметра: область применения, элемент и атрис. Эта функция ссылки в основном используется для добавления мониторинга событий в элементы DOM, изменения атрибутов модели и обновления DOM. У него три параметра:
1: параметр области. Когда мы не определяем атрибуты объема для инструкции, он представляет объем родительского контроллера.
2: Параметр элемента - это jqlite (подмножество jQuery) инструкции для обертывания элемента DOM. Если вы представили jQuery перед внедрением AngularJS, то этот элемент является элементом jQuery, а не элементом JQLite. Поскольку этот элемент был завершен JQUERY/JQLITE, нам больше не нужно использовать $ (), чтобы обернуть его при выполнении операций DOM.
Три: параметр ATTRS, который содержит стандартизированный объект параметра атрибутов элемента, где расположена директива.
5. Атрибут области (логический или объект] используется для определения объема инструкции. Это ложно по умолчанию. То есть инструкция наследует объем родительского контроллера. Вы можете использовать атрибуты в объеме родительского контроллера по желанию, но таким образом это загрязнет атрибуты в родительском масштабе, что не рекомендуется. Таким образом, мы можем позволить Scope взять следующие два значения: true и {}.
Когда это правда, это означает, что Angular создает прицел, унаследованный от родительского масштаба для инструкции.
var myApp = angular.module ('myApp', []) .controller ('myctrl', ['$ scope', function ($ scope) {$ scope.color = 'red';}]) .directive ('hello', function () {return {rtrimct: 'aecm', replication: true: trame: '<) nglic style = "founal-color: {{color}}"> нажмите меня </button> ', racope: true, link: function (scope, elements, attrs) {elements.bind (' click ', function () {elements.css (' фоновый цветЗдесь мы определяем цветный атрибут для родительского масштаба и назначаем его красным. В атрибуте DACTE RIMITIVE мы даем TRUE, поэтому Angular создает сферу, унаследованную от родительской области для этой директивы. Затем в атрибуте шаблона мы используем {{}} для использования атрибута цвета, унаследованного от родительской области, чтобы кнопка была красной.
Когда {} это означает, что создается изолированный объем и свойства родительского масштаба не будут унаследованы. Но иногда нам также необходимо получить доступ к свойствам или методам в родительском масштабе, так что нам делать? Угловой долго думал об этом для нас. Есть три способа запомнить вышеуказанные операции:
1: Используйте @ для реализации одностороннего привязки. Если мы только даем область этого значения {}, то цвет фона кнопки в приведенном выше коде будет серым. , и если нам нужно использовать цветный атрибут родительского масштаба, мы можем написать это:
Scope {color: '@color'} <hello color = "{{color}}"> </hello>Здесь есть две точки: 1. Цвет свойства в области применения представляет цвет в выражении {{}}, и два должны быть последовательными. 2. Значение цвета атрибута в области применения, то есть цвет после @, представляет цвет атрибута в элементе HTML ниже, поэтому они также должны быть последовательными. Если имя атрибута здесь такое же, как и имя, используемое в выражении {{}} в шаблоне, имя атрибута после @ может быть опущено и записано в следующей форме.
Scope {color: '@'}Из значения объема в инструкции можно видеть, что цвет в выражении {{}} в шаблоне инструкции указывает на атрибут цвета текущего элемента элемента, а значение этого цвета - значение цвета свойства родительского масштаба. Родительская область прицела передает значение своего цвета атрибута цветовому атрибуту текущего элемента, а затем атрибут цвета передает значение цвету в выражении в шаблоне. Этот процесс односторонний.
Два: использовать = для реализации двустороннего привязки
.directive ('hello', function () {return {restrict: 'aecm', replace: true, template: '<button style = "founal-color: {{color}}"> нажмите меня </button>', racpope: {color: '='}, ссылка: функция (Scope, Elements, attrs) {elements.bind ('click', function (). elements.css ('founal-color', 'blue');<hello color = "color"> </hello> <input type = "text" ng-model = "color"/>
Здесь у нас есть двусторонняя привязка атрибута цвета в области инструкции и атрибута цвета в родительской области, и добавляем событие Click в функцию ссылки инструкции. Нажатие кнопки изменит цвет кнопки и изменит значение цвета цвета прицела инструкции, а затем добавит входной тег на страницу HTML, вывод или введите значение цвета цвета родительской области. Здесь нужно отметить: значение имени атрибута текущего элемента не нужно добавлять выражение {{}}, потому что родительский объем здесь передает реальную модель данных о прицеле, а не простую строку, поэтому мы можем передать простые строки, массивы и даже сложные объекты в область инструкции. Теперь давайте посмотрим, что произойдет, когда нажимает эту кнопку.
Здесь мы видим, что цвет кнопки изменился на розовый, что означает, что щелчок меняет атрибут цвета прицела команды, что приводит к изменению цвета кнопки. Но вот не только кнопка, которая изменилась. Обратите внимание на значение в входной форме, также стало розовым, что означает, что цветный атрибут родительского объема также изменился. Кроме того, давайте введем цвет в вход, чтобы увидеть, какие изменения произошли.
, видно, что когда мы вводим другой цвет в форме, цвет также меняется цвет, что означает, что цветный атрибут объема команды был изменен. Таким образом, мы можем обнаружить, что использование '=' является двусторонним привязкой.
Три: Используйте и вызовите метод в родительской области
var myApp = angular.module ('myApp', []) .controller ('myctrl', ['$ scope', function ($ scope) {$ scope.color = 'red'; $ scope.sayhello = function () {alert ('hello');};}]. Заменить: true, шаблон: '<button ng-click = "sayhello ()" style = "foangy-color: {{color}}"> нажмите меня </button>', Scope: {color: '=', sayhello: '&'}, ссылка: функция (сфера, элементы, атрис) {элементы. elements.css ('founal-color', 'blue');<hello color = "color" sayshello = "sayhello ()"> </hello> <input type = "text" ng-model = "color"/>
Здесь у нас также есть две вещи, чтобы отметить: 1. Нам нужно не только использовать директиву NG-Click в шаблоне, чтобы привязать метод в родительском объеме, но и добавить свойство к текущему элементу, и это свойство указывает на метод родительского объема, который будет вызван. 2. Три атрибута по сфере инструкции Sayshello, текущий атрибут элемента Sayshello и имя метода события, которое связывает шаблон, должны быть последовательными. Затем мы можем нажать кнопку, и появляется диалоговое окно.
6. Атрибут Transclude [Boolean], этот атрибут используется, чтобы позволить нам указать, может ли директива содержать любой контент
.directive ('hello', function () {return {ограничить: 'aecm', reply: true, transclude: true, scope: {}, template: '<div ng-transclude> </div>',}}) <hello> hello <pan> {{color}} </span> </hello>Когда его значение верно, это значение значения на странице. Когда ложно, страница будет пустой. Здесь есть место, на которое можно обратить внимание, которое является <pan> {{color}} </span>. Цвет здесь - цвет в родительской области. Это не цветный атрибут области применения в директиве.
7. Компиля [функция] параметр. Этот метод имеет два элемента параметров, атрис. Первый элемент параметра относится к элементу, в котором находится инструкция, а второй ATRS относится к стандартизированному списку параметров, назначенных на элементе. Здесь у нас также есть место, чтобы отметить: функция компиляции не может получить доступ к области области и должна вернуть функцию ссылки. Однако, если функция компиляции не установлена, вы можете нормально настроить функцию ссылки (с компиляцией, вы не можете использовать ссылку, функция ссылки возвращается компиляцией).
.directive ('hello', function () {return {ограничить: 'aecm', replace: true, translate: true, template: '<button ng-click = "sayhello ()" style = "founal-color: {{color}}"> click me </button>', scope: {color: '=', sayhello: '&' atem (Scope, Elements, Attrs) {elements.bind ('click', function () {elements.css ('founal-color', 'blue');Теперь давайте нажмите эту кнопку
Мы обнаружили, что то, что произошло после нажатия кнопки здесь, то же самое, что и ранее использовал атрибут ссылки, и на самом деле не так много разницы.
На самом деле, в большинстве случаев нам нужно только использовать функцию ссылки. Это связано с тем, что большинству инструкций нужно рассмотреть вопрос о регистрации прослушивания событий, модели мониторинга и обновлении DOM, который может быть выполнен в функциях ссылок. Однако для таких инструкций, как NG-Repeat, элементы DOM должны быть клонированы и повторять несколько раз, а функция компиляции выполняется до выполнения функции ссылки. Так зачем нам нужно две отдельные функции, чтобы завершить процесс генерации, и почему мы не можем просто использовать ее? Чтобы хорошо ответить на этот вопрос, мы должны понять, как директивы скомпилированы в Angular!
8. Как составляются инструкции
Когда начнется наша угловая загрузка приложений, Angular будет использовать службу $ Compile для прохождения элемента DOM. После того, как все инструкции расположены, будет вызван метод компиляции инструкции, будет возвращена функция ссылки, а затем функция ссылки будет добавлена в список функций ссылки, выполненных позже. Этот процесс называется стадией компиляции. Такие инструкции, как NG-Repeat, необходимо повторять и клонировать много раз. Функция компиляции выполняется только один раз на стадии компиляции, и эти шаблоны копируются, но функция ссылки выполняется для каждого копированного экземпляра. Таким образом, мы можем справиться с этим отдельно, чтобы улучшить нашу производительность (это предложение немного нереально, я скопировал его из других мест.
9. Controller [String или Function] и требуют [String или String []] параметров. Когда мы хотим разрешить другим инструкциям взаимодействовать с вашими инструкциями, нам нужно использовать функцию контроллера. Когда другая директива хочет взаимодействовать, она должна объявить свою ссылку на экземпляр контроллера вашей директивы.
.directive ('hello', function () {return {scope: {}, require: '^He', compile: function (element) ($ scope, $ compile, $ http) {this.fn = function () {alert ('hello');<он> <hello color = "color" sayshello = "sayhello ()"> </hello> </he>
Когда страница загружена, появится диалоговое окно.
Ну, вышеуказанное - это то, что я узнал о инструкциях, которые я узнал в этот период времени. Давайте напишем это.
Вышеупомянутый всесторонний анализ инструкций в AngularJS (должен читать) - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.