Директива - это способ научить HTML играть новые трюки. Во время компиляции DOM Директивы соответствуют HTML и выполнению. Это позволяет директивную регистрационную поведение или преобразование структур DOM.
Angular поставляется с набором встроенных директив, что очень полезно для создания веб-приложения. Если вы продолжите расширяться, вы можете определить конкретный язык (DSL) в HTML.
1. Цитата директив в HTML
Директива имеет именование стиля верблюда, например, NGBIND (кажется, не используется в свойствах ~). Тем не менее, директива также может быть названа с нижним типом змеи (корпус змеи), который должен быть связан через: (Colon), - (минус) или _ (подчеркивается). В качестве дополнительной опции, директива может быть префикс «x-» или «data-» для удовлетворения потребностей HTML-проверки. Вот законные имена директив:
Директива может быть размещена в именах элементов, атрибутах, классах и комментариях. Ниже приведен эквивалентный способ цитировать Mydir, директиву. (Но многие директивы ограничены использованием «свойств»)
<span my-dir = "exp"> </span> <pran> </span> <y-dir> </my-dir> <!-Директива: my-dir exp->
Директива может быть приведена различными способами, а в следующих списках n эквивалентные способы:
<! Doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <Title> invoke-directive </title> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <div ng-controller = "myctrl"> hello <input ng-model = "name"/> <hr/> ngbind = "name" Это не может быть использовано ~~ <span ngbind = "name"> </span> <br/> ng: bind = name "<span ng: bind =" name " ng_bind = "name" <span ng_bind = "name"> </span> <br/> ng-bind = "name" <span ng-bind = "name"> </span> <br/> data-ng-bind = "name" <span data-bind = "name"> </span> <br/> x-bind = " x-ng-bind = "name"> </span> <br/> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> myctrl ($ scope) {$ scope.name = "beauty ~~"; } </script> </body> </html>2. Строка интерполяция
Во время процесса компиляции компилятор соответствует тексту со встроенными выражениями в атрибутах (таких как {{что -то}}) через службу $ Interpolate. Эти выражения будут зарегистрированы как часы и будут обновляться вместе как часть цикла дайджеста (разве это разве это ранее?!). Вот простая интерполяция:
<img src = "img/{{username}}. jpg"/> hello {{username}}!
3. Процесс компиляции и соответствие директивы
Три шага, чтобы «компилировать» HTML:
1. Во -первых, преобразовать HTML в объекты DOM через стандартный API браузера. Это очень важный шаг. Потому что шаблон должен быть разыгрывается (соответствует спецификациям). Это можно сравнить с большинством систем шаблонов, которые обычно основаны на строках, а не на элементах DOM.
2. Компиляция DOM выполняется путем вызова метода $ comple (). Этот метод пересекает DOM и соответствует директиве. Если совпадение будет успешным, он будет добавлен в список директивы вместе с соответствующим DOM. До тех пор, пока все директивы, связанные с указанным DOM, идентифицированы, они будут отсортированы в приоритете и выполняют функцию compile () в этом порядке. Функция директивного компиляции имеет возможность изменить структуру DOM и отвечает за создание анализа функции Link (). Метод $ compile () возвращает комбинированную функцию связывания, которая представляет собой набор связанных функций, возвращаемых функцией компиляции самой директивы.
3. Подключите шаблон к областям с помощью функции связывания, возвращаемой на предыдущем шаге. Это, в свою очередь, вызывает собственную функцию связывания директивы, позволяя им зарегистрировать некоторых слушателей на элементе и создавать некоторые часы с областью. Результатом этого является двустороннее, мгновенное связывание между масштабами и DOM. При изменении объема DOM получит соответствующий ответ.
var $ compile = ...; // вводится в свой код arcope = ...; var html = '<div ng-bind =' exp '> </div>'; // Шаг 1: Расположение HTML в DOM -элемент var tempate = angular.element (html); // Шаг 2: Скомпилируйте шаблон var linkfn = $ compile (шаблон); // Шаг 3: Свяжите скомпилированный шаблон с прицелом. Linkfn (Scope);
4. Причины разделения компиляции/связи
В настоящее время вы можете задаться вопросом, почему процесс компиляции разделен на два шага: компиляция и ссылка. Чтобы понять это, давайте посмотрим на реальный пример (ретранслятор)
Hello {{user}}, у вас есть эти действия: <ul> <li ng-repeat = "action in user.actions"> {{action.description}} </li> </ul>Проще говоря, причина, по которой мы разделяем два этапа компиляции и ссылки, заключается в том, что иногда соответствующая структура DOM должна быть изменена после изменения модели, таких как ретрансляторы.
Когда приведенный выше пример будет составлен, компилятор будет выполнять все узлы, чтобы найти директиву. {{user}} является примером интерполяционной директивы. Ngrepeat - еще одна директива. Но у Ngrepeat есть трудности. Это требует возможности быстро создавать новый LI для каждого действия в пользователях. Это означает, что для того, чтобы удовлетворить цель клонирования LI и внедрения конкретных действий (здесь относится к одному из значений действий пользователя), он должен сохранить чистую копию элемента LI, который необходимо клонировать и вставить в элемент UL. Но клонировать элемент LI недостаточно. LI также должен быть скомпилирован, чтобы его директива ({{action.descriptions}}) могла быть проанализирована в правильном объеме. Первоначальный метод обычно просто вставляет копию элемента LI, а затем компилирует его. Тем не менее, компиляция копий каждого элемента LI будет медленнее, потому что процесс компиляции требует от нас пройти через дерево узлов DOM, найти директивы и запустить их. Если у нас есть компиляция, которая должна обрабатывать 100 предметов через ретранслятор, то мы застряли с проблемами производительности.
Решение проблемы состоит в том, чтобы разбить процесс компиляции на два этапа. Стадия компиляции распознает все директивы и сортирует их по приоритету, связывая конкретную область с определенной LI на стадии связывания.
Ngrepeat собирает отдельные LIS отдельно, чтобы не допустить попадания процесса компиляции в элементы LI. Результатом компиляции элемента LI является функция связывания директивы, содержащая все директивы, содержащиеся в элементе LI, готовые к подключению с копией конкретного элемента LI. Во время выполнения, Ngrepeat контролирует выражение и добавляется в качестве элемента в массив копий Li Elements, создавая новую область для клонированных элементов LI и вызывая функцию ссылки, соответствующую копии.
Суммировать:
1. Функция компиляции - Функции компиляции относительно редки в директивах, потому что большинство директив заботятся только о работе с указанными элементами DOM, а не изменением шаблонов элементов DOM (сама DOM и его внутренняя структура). Чтобы оптимизировать производительность, некоторые операции, которые могут быть переданы директивными экземплярами, могут быть перемещены в функцию компиляции.
2. Функция ссылки - очень мало директив не имеют функции ссылки. Функция ссылки позволяет директиве зарегистрировать слушатель на указанном копии экземпляра элемента DOM или копировать конкретный контент из области в DOM.
5. Напишите директиву (простая версия)
В этом примере мы создадим директиву, которая отображает текущее время в соответствии с форматом ввода.
<! Doctype html> <html lang = "zh-cn" ng-app = "timeformat"> <Head> <meta charset = "utf-8"> <Teal> формат времени </title> </head> <body> <div ng-controller = "myctrl" id = "main"> date format: <input ng-model = "myctrl" id = "> date format: <input ng-model =" myctrl ". type = "text"/> <hr/> <!-Следующий атрибут x-ток-это попробовать законное именование, упомянутое выше ~~ current: время, текущее время, current_time, data-current-time -_- !!! -> Текущее время: <span x-current-time = "format" id = "myformat"> </span> <br/> <кнопка ng-click = "remove ()"> удалить Span </button> </div> <script src = "../ angular -1.0.1.js" type = "text/javascript"> </script> <script-1.0. type = "text/javascript"> angular.module ("TimeFormat", []) // Зарегистрировать метод директивной фабрики «текущий время» в приложении TimeFormat // Как уже упоминалось выше, инъекция зависимости может быть записана непосредственно в параметрах функции, введена здесь $ Timeout и DataFilter. Направляемое («CurrentTime», функция DateFilter) {//это. Функция компиляции, почему? ...) Функция возврата (применение, элемент, attr) {var expertid; Scope. $ WATCH (ATTR.CurrentTime, Function (значение) {scope.format = value; updateTime ();}); }). Controller ("myCtrl", функция ($ rack, $ rootscope) {$ scope.format = "m/d/yy h: mm: ss a"; $ scope.remove = function () {var Oformat = document.getElementById ("myformat"); if (oformat) {adgular.element (oformave). Событие $ Destroy может быть вызвано!6. Напишите директиву (подробная версия)
Ниже приведен пример создания директивы (шаблон определения директивных объектов). Если вы хотите увидеть подробный список, пожалуйста, продолжайте читать.
var mymodule = angular.module (...); mymodule.directive ('DiMemiveAname', Function Factory (injectables) {var distectiveFinitionObject = {Приоритет: 0, шаблон: '<div> </div>', templateurl: 'Directive.html', замена: falsclude: false, ограничение: 'a', scope: false, compile: function (telement, transclude, transl. Pre: Function Prelink (Scope, IELEME, IATTRS, CONTROLLER) {...}, POST: FUNCTION POSTLINK (Scope, IELEME, IATTRS, Controller) {...}}}, ссылка: функция Postlink (Scope, IELEMENT, IATTRS) {...}};В большинстве сценариев нам не нужен точный контроль, поэтому приведенное выше определение может быть упрощено. Определение каждой части шаблона будет объяснено в следующей главе. В этой главе мы сосредоточены только на изомерах этого скелета, которые определяют шаблон (изомеры этого скелета, я не понимаю ... с нетерпением жду дополнения каждого).
Первый шаг в упрощении вашего кода - полагаться на значения по умолчанию. Следовательно, приведенный выше код может быть упрощен:
var mymodule = angular.module (...); mymodule.directive ('DiMimainAme', Function Factory (injectables) {var distectiveFinitionObject = {compile: function compile (telement, tattrs) {return function postlink (scope, ielement, iattrs) {...}}}; returniveFinitionObject;});Большинство директив заботятся только о экземплярах, а не о преобразовании шаблонов, поэтому они могут быть дополнительно упрощены (перевод очень сильно ... с нетерпением жду дополнения каждого):
var mymodule = angular.module (...); mymodule.directive ('DiMemiveAname', Function Factory (injectables) {return function postlink (scope, ielement, iattrs) {...}});7. Фабричный метод
Метод завода отвечает за создание директив. Он используется только один раз, как раз тогда, когда компилятор сначала соответствует директиве. Вы можете сделать некоторые операции инициализации здесь. Метод завода выполняется через $ injector.invoke, позволяя ему соответствовать всем правилам декларации инъекций (правила аннотации инъекции), что делает его инъекционным.
8. Описание объекта Директивы
Объекты определения директивы предоставляют структуру компилятора. Свойства следующие:
1.NAME - имя текущей области. Значение по умолчанию может использоваться при регистрации (не заполнено).
2. Приостановка- Когда в одном и том же элементе DOM определяется несколько директив, иногда необходимо прояснить их заказ на выполнение. Это свойство используется для сортировки перед вызовом функции директивной компиляции. Если приоритет одинаков, порядок выполнения является неопределенным (после предварительных экспериментов, те, с более высоким приоритетом, выполняются первыми, и один и тот же уровень аналогичен «пост-связывающему« выполнению сначала ». Кроме того, я был немного небрежным во время теста. При определении директивы, директива с одинаковым именем была определена дважды, но выполнение обнаружено, что оба компиляции или функции ссылки будут выполнены).
3. Комминальный (последняя группа) - если установлено «true», это означает, что текущий приоритет станет директивой последней группы исполнения. Если какая -либо директива такая же, как текущий приоритет, они все равно будут выполняться, но порядок неопределен (хотя порядок неопределен, в основном он такой же, как и приоритет. После выполнения текущего приоритета, более низкий приоритет не будет выполнен снова).
4.scope - если установлено на:
1) .true - для этой директивы будет создана новая область. Если в одном и том же элементе есть несколько директив, которые требуют новой области, он все равно создаст только одну область. Новые правила объема не применяются к корневому шаблону, поэтому шаблон корня имеет тенденцию получать новый объем.
2). {} (HASH) - будет создана новая изолятная область. Разница между масштабами «изолята» и общим объемом состоит в том, что она не наследуется от родительского объема с помощью прототипов. Это очень полезно для создания многоразовых компонентов и может эффективно предотвратить чтение или изменение данных из родительского объема. Эта независимая область создает хэш объекта с набором локальных свойств масштаба, полученных из родительского масштаба. Эти локальные свойства полезны для значений псевдонима для шаблонов -_-!. Определение местных жителей является хэшем локального свойства с учетом своего источника#&) $ &@#) ($ &@#_):
3). @ Или @Attr - Создайте локальное свойство с оцеливанием для свойства DOM. Поскольку значение свойства всегда тип строки, это значение всегда возвращает строку. Если имя атрибута не указано через @attr, локальное имя всегда будет с именем атрибута DOM. Например, <widget my-attr = ”hello {{name}}">, область виджета определяется как: {localname: '@myattr'}. Затем, локальное имя свойства, область сферы, сопоставляется реальным значением, преобразованным «hello {{name}}». После изменения значения атрибута имени атрибут локального имени в области вида виджета также изменится соответствующим образом (только одностороннее, отличное от «=» ниже). Атрибут имени читается в родительском объеме (не в компоненте)
4). = Или = выражение (может быть, ATTR здесь) - установите двунаправленное связывание между атрибутом локальной области и атрибутом родительской области. Если имя ATTR не указано, локальное имя будет соответствовать имени атрибута. Например, <widget my-attr = ”parentmodel”>, область, определяемое Widget: {localmodel: '= myattr'}, тогда свойство прицела виджета «localName» сопоставлено седой «ParentModel» родителей. Если какие -либо изменения происходят в ParentModel, LocalModel также изменится, и наоборот. (Bi-Way Skining)
5). & Или & attr - обеспечивает способ выполнить выражение в контексте родительского объема. Если имя ATTR не указано, локальное имя будет соответствовать имени атрибута. Например, <widget my-attr = ”count = count + value”>, объем виджета определяется как: {localfn: 'increment ()'}, затем изолирует свойство область «localfn», будет указывать на функцию, завернутую выражением (). Вообще говоря, мы хотим передавать данные из изолята с применением родителей посредством выражения. Это можно сделать, передавая карту значения ключа локальной переменной в функцию обертки выражения. Например, если выражение является увеличением (сумма), то мы можем позвонить Localfn через LocalFN ({amum: 22}), чтобы указать значение суммы (приведенный выше пример действительно не понимается и куда вы пошли?).
5. Контроллер - Конструктор контроллера. Контроллер будет инициализироваться перед шагом предварительного привязки и позволит другим директивам обмениваться с помощью требуемого с указанным именем (см. Свойство «Восстания» ниже). Это позволит директивам общаться друг с другом и улучшить взаимное поведение. Контроллер вводит следующие локальные объекты по умолчанию:
1).
2). $ Элемент - текущий элемент
3). $ Attrs - объект атрибута текущего элемента
4). $ Transclude - транспонированная функция связывания, предварительно связанная с текущим транспонированным объемом: функция (ClonelingFN). (Трансклудийная функция предварительно связана с правильным применением перевода)
6.Require - Запросите другой контроллер, чтобы передать его в текущую функцию связывания директивы. Требовать, чтобы имя прямого контроллера было передано. Если контроллер, соответствующий этому имени, не может быть найдено, ошибка будет выбрана. Название можно префикс следующим образом:
1).? - Не бросайте исключения. Это делает эту зависимость вариантом.
2).^ - контроллер, который позволяет искать родительские элементы
7. Специалист - строка подмножества EACM, которая ограничивает директиву указанному методу объявления. Если опущены, директива позволит только объявления с помощью атрибутов:
1) e-имя элемента: <my-directive> </my-directive>
2) .a - Имя атрибута: <div my -directive = ”exp»> </div>
3). C - Имя класса: <div class = "my -directive: exp;"> </div>
4) .M-Комментарий: <!-Директива: My-Directive Exp->
8.template - если заменить верно, замените содержание шаблона текущим элементом HTML и перенесите свойства и класс исходного элемента вместе; Если False, элемент шаблона рассматривается как дочерний элемент текущего элемента. Для получения дополнительной информации, пожалуйста, ознакомьтесь с главой «Создание виджетов» (где ... Создание компонентов доступно ...)
9.templateurl - в основном такой же, как шаблон, но шаблон загружается через указанный URL. Поскольку загрузка шаблона является асинхронной, компиляция и связывание будут приостановлены и будут выполняться после загрузки.
10. Replace - Если установлено true, шаблон заменит текущий элемент вместо того, чтобы быть добавленным в текущий элемент в качестве дочернего элемента. (Примечание: когда истина, шаблон должен иметь корневой узел)
11. TransClude - Скомпилируйте содержание элемента, чтобы его можно было использовать с помощью директивы. Требуется (в шаблоне) для использования (ссылка). Преимущество транспоксации заключается в том, что функция связывания может получить функцию перевода, которая предварительно связана с текущей областью. Как правило, создайте виджет и создайте изоляцию. Перевод - это не ребенок, а брат изолята. Это сделает виджет иметь частное состояние, и трансклюзия будет связана с родительским (предварительным изоляционным) областью. (I don't understand the above paragraph. But in actual experiments, if myDirective is called through <any my-directive>{{name}}</any my-directive> and the transclude is set to true or a string and the template contains <sometag ng-transclude>, the compilation result of {{name}} will be inserted into the content of sometag. If any content is not wrapped by the tag, then В некотором случае будет дополнительный промежуток.
1) .true - преобразовать содержание этой директивы. (В этом смысле он должен непосредственно скомпилировать контент и переместить его в назначенное место)
2). «Элемент» - преобразует весь элемент, включая другие директивы с более низким приоритетом. (Например, после составления всего контента он обрабатывается в целом (обернутый p снаружи) и вставляется в указанное место)
12.compile - Вот функция компиляции, которая будет подробно объяснена в следующих главах
13.link - Вот функция ссылки, которая будет подробно объяснена в следующей главе. Это свойство используется только в том случае, если свойство компиляции не определена.
9. Скомпилируйте функцию
Функция компиляция (Telement, Tattrs, TransClude) {…}
Функция компиляции используется для обработки преобразования шаблонов DOM. Поскольку большинство директив не требуют шаблонов конверсии, компиляция не будет часто использоваться. Директива, которая требует функции компиляции, как правило, те, которые необходимы для преобразования шаблонов DOM (например, NgrePeat), или те, которые необходимо загружать содержимое асинхронно (например, Ngview). Функция компиляции имеет следующие параметры:
1. Размещение - элемент шаблона использует текущую директивную элемент. Можно просто сделать преобразование шаблона под текущим элементом или текущим элементом дочернего элемента.
2.tattrs - Атрибуты шаблона - Стандартизированные атрибуты, объявленные в текущем элементе, могут быть разделены между различными директивами. Для получения подробной информации, пожалуйста, смотрите главу атрибутов
3. Переверните функцию связывания для преобразования: функция (сфера, клонирование).
Примечание. Если шаблон был клонирован, экземпляр шаблона и экземпляр Link не может быть одним и тем же объектом. Для этого небезопасно делать что -либо, кроме преобразования DOM в функции компиляции, которая будет применена ко всем клонам. В частности, регистрационная операция слушателя событий DOM должна выполняться в функции связывания, а не функции компиляции.
Функция компиляции может иметь возвратное значение, а тип может быть функцией или объектом.
1. Функция возврата обычно используется, когда функция компиляции не требуется (пусто), что эквивалентно регистрации функции связывания через ссылку (непосредственно определяет атрибуты шаблона).
2. Возвращает объект, содержащий свойства Pre и Post - позволяет нам контролировать при связывании функции во время фазы связывания. Для получения подробной информации, пожалуйста, посмотрите следующие главы о предварительных функциях и после сцепления.
10. Связывание функции
Ссылка на функцию (Scope, IELEMENT, IATTRS, Controller) {…}
Функция ссылки отвечает за регистрацию слушателя событий DOM, а также может выполнить операции обновления DOM. Функция ссылки будет выполнена после завершения операции клонирования шаблона. Большая часть логики директивы хранится здесь.
1.scope - Scope - используется для регистрации часов (http://docs.angularjs.org/api/ng.$rootscope.scope#$watch).
2.Ealement - экземпляр элемента - элемент, используемый директивой. Безопасно работать на детских элементах в функции после линии линии линии. Потому что детские элементы были связаны (связаны с моделью?!).
3.iattrs - экземпляр атрибута - список атрибутов стандартного текущего элемента. Разделяется между всеми директивными функциями связывания.
4.controller - экземпляр контроллера - Если один из контроллеров определяется в директиве текущего элемента, вы можете получить экземпляр контроллера здесь. Этот контроллер используется среди всех директив, что позволяет каждому директиве рассматривать контроллер как канал связи между ними.
Функция до линии
Выполнить перед дочерним элементом. Здесь не безопасно делать преобразование DOM, потому что функция связывания компилятора может не найти правильные элементы при связывании.
Функция после линии
Выполнить после связи дочернего элемента. Здесь безопасно выполнить конверсию DOM.
11. Атрибуты
Объект атрибута - как аргументы в link () или compile () - это способ получить доступ к следующему:
1. Стандартизированные имена атрибутов: Поскольку директива, такая как NGBIND, ее можно проявить во многих формах, таких как «ng: bind», «x-ng-bind» ... Этот объект атрибута позволяет нам получать доступ к атрибутам через стандартное именование (верблюда).
2. Связь между директивами: все директивы разделяют экземпляр объекта атрибута, так что директивы могут общаться между директивами через объекты атрибутов.
3. Поддержка интерполяции: атрибут интерполяции присваивается объекту атрибута, что позволяет другим директивам читать интерполированное значение.
4. Наблюдайте за интерполированными атрибутами: наблюдайте за изменениями значений атрибутов через ATTR. Это не только очень эффективно, но и единственный способ просто получить реальное значение. Поскольку на стадии связывания интерполяция не была назначена (заменена реальным значением), поэтому при доступе к ней в настоящее время результат не определен.
<! Doctype html> <html lang = "zh-cn" ng-app = "DirectiveProperty"> <Head> <meta charset = "utf-8"> <Title> Directive-Attribute-test </title> <style type = "text/css"> .ng-cloak {show: no; } </style> </head> <body ng-controller = "myctrl"> <input type = "text" ng-model = "name" value = "myname"/> <p my-attr = "123" Директива-p2 attrd = "{{name}}"> </p> <script src = "../ angular -1.0.1. type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("DirectiveProperty", []); app.controller ("myctrl", function ($ scope) {$ scope.name = "My Little Dada";}); VAR DIMEIVIVEP2 = APP.DIRECTIVE ("DIMIMEVIVEP2", function () {return {ссылка: функция Postlink (Scope, Lele, Lattr) {console.log ("myAttr:" + lattr.myattr); // 123 console.log ("myattr:" + lattrdd); // undeficed lattr. Console.log ('attrdd изменил значение' + value);12. Понять трансклюзию и объем
Нам часто нужны многоразовые компоненты. Вот псевдокод, показывающий, как может работать простой диалоговый компонент.
<button ng-click = "show = true"> show </button> <dialog visible = "show" on-cancel = "show = false" on-ok = "show = false; dosomething ()"> Body Goes ЗДЕСЬ: {{username}} is {{title}}. </dialog>Нажатие кнопки «Показать» откроет диалог. Диалог имеет заголовок, который связан с данными «Имя пользователя», а также есть абзац, который мы хотим разместить в диалоговом окне.
Ниже приведено определение шаблона, написанное для диалога:
<div ng-shef = "show ()"> <h3> {{title}} </h3> <div ng-transclude> </div> <div> <Кнопка ng-click = "onok ()"> Сохранить изменения </button> <Кнопка ng-click = "oncancel ()"> Close> </div> </div>Это не будет правильно отображаться, если мы не сделаем какую -то особую обработку по объему.
Первая проблема, которую мы должны решить, заключается в том, что шаблон диалога ожидает определения заголовка и будет связан с именем пользователя при инициативе. Кроме того, кнопка требует, чтобы две функции Onok и Oncancel появились в области прицела. Это ограничивает полезность виджета ..). Чтобы решить проблему отображения, локальные переменные, ожидаемые шаблоном, создаются следующими локальными методами (местными жителями, что, по оценкам, является областью применения в шаблоне определения директивы):
Scope: {title: 'Bind', // Настройка заголовка, чтобы принять связывание данных Onok: 'Expression', // Создать функцию делегирования Onok OnCancel: 'Expression', // Создание функции делегирования Oncancel Show: 'Accessor' // Создать функцию getter/setter для видимости.}.Создание локальных свойств в управляющем масштабе приносит две проблемы:
1. Изоляция (изоляция атрибута?) - Если пользователь забудет установить заголовок атрибута элемента в шаблоне управления, заголовок будет связан с атрибутом «заголовок» прицела предка (если есть). Это непредсказуемо и нежелательно.
2. Transclusion - Переведенный DOM может просматривать локальные жители (изолят?) Управления. Местные жители будут переопределять свойства, которые действительно должны быть связаны в трансклозии. В нашем примере свойство заголовка в плагине разрушает свойство титула трансклюзии.
Чтобы решить эту проблему отсутствия изоляции атрибутов, нам нужно определить изолированную область для этой директивы. Изолотированный объем не унаследована от прототипа от масштаба ребенка (почему это детская масштаба?
Тем не менее, изолированная область приносит новую проблему: если переведенный DOM является ребенком из изолированного прицела виджета, то он не сможет связываться с чем -либо. Следовательно, переведенная область является детской областью исходного объема, созданного до того, как контроль создает изолированную область местного свойства. Переведенные и изолированные прицелы принадлежат к брачному узлу (в дереве прицела).
Это может показаться немного неожиданно сложным, но это приносит, по крайней мере, сюрпризы, чтобы управлять пользователями и управлять разработчиками. (Проблема была решена)
Следовательно, окончательное определение директивы примерно следующим образом:
TransClude: True, Scope: {TILE: 'Bind', // Настройка заголовка, чтобы принять связывание данных Onok: 'Expression', // Создать функцию делегирования Onok OnCancel: 'Expression', // Создать функцию делегирования Oncancel Show: 'Accesster' // Создать функцию Getter/Setter для видимости. // я попробовал это, но это не удалось ... пожалуйста, продолжайте читать}Я пытался собрать вместе приведенный выше код в полный пример. Если вы копируете напрямую, ожидаемые результаты не будут достигнуты. Но после небольшой модификации можно запустить плагин.
<! Doctype html> <html ng-app = "dialog"> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Directive-dialog </title> <meta content = "ie = chrome = 1" src = "../ angular.js" type = "text/javascript"> </script> </head> <body> <div ng-controller = "myctrl"> <button ng-click = "show = true"> show </button> <dialog visible = "{{show}}" on-cancel = "show = false;" on-ok = "show = false; MethodInParentScope ();"> <!-Вышеуказанные на канцеле и на OK ссылаются и в прицеле Isoloate Directive. Если выражение содержит функцию, то вам необходимо привязать функцию в родительской области (в настоящее время MyCtrl Scope) -> Body Goes здесь: username: {{username}}, заголовок: {{title}}. <ul> <!-Вы также можете воспроизводить так, как это здесь ~ имена-это родительская область-> <li ng-repeat = "Имя в именах"> {{name}} </li> </ul> </dialog> </div> <script type = "text/javascript"> var mymodule = angular.module ("dialog", []); mymodule.controller ("myctrl", function ($ scope) {$ scope.names = ["name1", "name2", "name3"]; $ scope.show = false; $ scope.username = "lclao"; $ scope. Играет в родительском объеме !!!);};}); mymodule.directive ('dialog', function factory () {return {Приоритет: 100, шаблон: ['<div ng-she-shef = "visible">', '<h3> {{title}} </h3>', '<div ng-transclude> </div>', '<div>', 'кнопка ng-click onk-click = ",>"? ng-click = "oncancel ()"> close </button> ',' </div> ',' </div> ',' </div> ']. Join (""), заменить: false, transclude: true, ограничить:' E ', Scope: {title: "@", // Quote vitue Attruit at attruit на Dialog Tag: Форма функции обертки Oncancel: "&", // Использование формы функции обертки ссылается на содержимое свойства на канцеле диалогового тега. </script> </body> </html>13. Создание компонентов
Обычно мы ожидаем заменить директиву через сложную структуру DOM (элемент находится? Цель, вероятно, состоит в том, чтобы сделать директиву внутренней комплексной точки, которые выглядят потрясающими точками @_ @). Это делает директиву ярлыком на строительство приложений с использованием многоразовых компонентов.
Вот пример многоразового компонента:
<! Doctype html> <html ng-app = "Zippymodule"> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Zippymodule </title> <Meta Content = "ie = Edge, chrome = 1" ht-equivule </title> <meta = "ie = edge = chrome = 1" http-equivule </title> <meta = edge = chrome = 1 "hpippymodule </title> <meta =" ie = edge = chrome = 1 "hippymodule </teal> <meta = <style type = "text/css"> .zippy {border: 1px solid black; дисплей: встроенный блок; Ширина: 250px; } .zippy.opened> .title: до {content: ''; } .zippy.opened> .body {display: block; } .zippy.closed > .title:before { content: '► '; } .zippy.closed > .body { display: none; } .zippy > .title { background-color: black; color: white; padding: .1em .3em; курсор: указатель; } .zippy > .body { padding: .1em .3em; } </style> <script src="../angular.js" type="text/javascript"></script></head><body> <div ng-controller="MyCtrl"> Title: <input ng-model="title" type="text"><br/> Text: <textarea ng-model="text"></textarea> <hr/> <div zippy-title="Details: {{title}}...">{{text}}</div> </div> <script type="text/javascript"> var myModule = angular.module("ZippyModule", []); myModule.controller("MyCtrl", function ($scope) { $scope.title = "Here is the title"; $scope.text = "Here is the content... "; }); myModule.directive('zippy', function () { return { template: '<div>' + ' <div>{{title}}</div>' +//This title belongs to the property of the current direct isolate scope ' <div ng-transclude></div>' + //What is here, what is obtained is the property of the parent scope '</div>', replace:true, transclude: true, restrict:'C', scope:{ title:"@zippyTitle"//Bind the zippy-title attribute on the directive element}, link:function(scope,element,attrs) { var title = angular.element(element.children()[0]), opened = false; title.bind("click", toogle); element.addClass("closed"); function toogle() { opened = !opened; element.removeClass(opened ? "closed" : "opened"); element.addClass(opened ? "opened" : "closed"); } } }; }); </script></body></html>