Для инструкций их можно просто понимать как функции, которые работают на определенных элементах DOM, и инструкции могут расширить функции этого элемента.
Во -первых, давайте посмотрим на полный пример параметра, а затем подробно представмм функции и использование каждого параметра:
Angular.Module ('myApp', []) .directive ('myDirective', function () {return {RESTRICT: String, Priority: Number, Terminal: Boolean, Template: String или Function Function: функция (Telement, Tattrs) {...}, Templateurl: String, Boolean или String, Scope: Boolean или Obj Функция (Область, Элемент, АТРЫ, Transclude, другие iNjectables) {...}, Controlleras: String, Tress: String, ссылка: функция (Scope, ielement, iattrs) {...}, compile: // возвращать объект или функция подключения, как показано ниже: функция (Telement, tattrs, transclude) {return {pre: function (upport, iat, intorm post: function (Scope, IELEME, IATTRS, Controller) {...}} возвращайте функцию Postlink (...) {...}}};ограничить [строку]
Ограничение является дополнительным параметром. Используется для указания в форме инструкции, объявленной в DOM. Значение по умолчанию - это, то есть оно объявлено в форме атрибута.
Необязательные значения следующие:
E (элемент)
<my-girective> </my-directive>
A (свойство, значение по умолчанию)
<div my-directive = "выражение"> </div>
C (имя класса)
<div> </div>
М (примечание)
<-Директива: мое направляющее выражение->
Как правило, учитывая совместимость браузера, настоятельно рекомендуется немедленно объявить атрибуты по умолчанию в виде атрибутов. Последний метод рекомендуется не использовать квалификационный индекс, когда он не требуется.
Код:
angular.module ('app', []) .directive ('myDirective', function () {return {rervict: 'e', Template: '<a href = "http://www.baidu.com"> baidu </a>'};}) htmlcode: <my-directive> <//my-directive> <//my-directive>Эффект:
Приоритет [int]
Большинство инструкций игнорируют этот параметр и используют значение по умолчанию 0, но некоторые сценарии очень важны или даже необходимы для установки высокого приоритета. Например, NgrePeat устанавливает этот параметр на 1000, чтобы он мог гарантировать, что на одном и том же элементе он всегда вызывается перед другими инструкциями.
Терминал [Bool]
Этот параметр используется для прекращения запуска инструкций на текущем элементе, который имеет более низкий приоритет, чем эта инструкция. Тем не менее, инструкции с тем же приоритетом, что и текущая инструкция все еще будет выполнена.
Например: NGIF имеет приоритет, немного выше, чем ngview (они фактически являются терминальными параметрами). Если значение выражения NGIF является истинной, NGVIEW может быть выполнен нормально, но если значение выражения NGIF является false, NGVIEW не будет выполнен, поскольку приоритет NGVIEW низкий.
шаблон [строка или функция]
Параметр шаблона является необязательным и должен быть установлен на одну из следующих двух форм:
Кусок текста HTML;
Функция, которая может принять два параметра, параметры являются Telement и Tattrs, и возвращает строку, представляющую шаблон. T в Telement и Tattrs означает шаблон по сравнению с экземпляром.
Во -первых, давайте продемонстрируем второе использование:
angular.module ('app', []) .directive ('mydirective', function () {return {Restrict: 'eAc', template: function (elem, attr) {return "<a href = '" + attr.value + "'>" + attr.text + "</a>";};})Htmlcode: (эффект такой же, как и выше, демонстрация не будет сделана)
<my-directive value = "http://www.baidu.com" text = "baidu"> </my-directive> <div my-directive value = "http://www.baidu.com" text = "baidu"> </div>
Templateurl [строка или функция]
Шаблон - это необязательный параметр, который может быть следующего типа:
Строка, представляющая путь внешнего HTML -файла;
Функция, которая может принять два параметра, параметры являются Telement и Tattrs, и возвращает строку с путем внешнего файла HTML.
В любом случае, URL-адрес шаблона будет проходить через встроенный уровень безопасности NG, особенно $ getTrustedResourceurl, который защищает шаблон от загрузки неверными источниками. По умолчанию при вызове директивы файл шаблона HTML будет запрошен через AJAX в фоновом режиме. Загрузка большого количества шаблонов сильно замедлит клиентское приложение. Чтобы избежать задержки, шаблоны HTML могут быть кэшированы перед развертыванием приложения.
Код:
angular.module ('app', []) .directive ('mydirective', function () {return {ruptrict: 'aec', templateurl: function (elem, attr) {return attr.value + ".html"; //, конечно, мы можем напрямую указать путь, и мы можем включать выражения в шаблон};заменить [bool]
Заменить является дополнительным параметром. Если этот параметр установлен, значение должно быть истинным, потому что значение по умолчанию является ложным. Значение по умолчанию означает, что шаблон будет вставлен в элемент, который называет эту директиву в качестве дочернего элемента.
Например, в соответствии с значением по умолчанию приведенного выше пример сгенерированный код HTML заключается в следующем:
<my-directive value = "http://www.baidu.com" text = "baidu"> <a href = "http://www.baidu.com"> baidu </a> </my-directive>
Если заменить = true установлен
<a href = "http://www.baidu.com" value = "http://www.baidu.com" text = "baidu"> baidu </a>
Согласно моему наблюдению, этот эффект будет показывать фактический эффект только при ограничении = "e".
После представления основных параметров инструкции участвуют более важные параметры области ...
Параметр области [Bool или Object]
Параметр области является необязательным и может быть установлен на TRUE или объект. Значение по умолчанию неверно.
Если несколько директив по использованию элемента используют изоляцию, только один из них может вступить в силу. Только корневой элемент в шаблоне директивы может получить новый объем. Следовательно, область применения устанавливается по умолчанию по умолчанию для этих объектов. Функция встроенной директивы NG-контроллера состоит в том, чтобы унаследовать от родительского масштаба и создать новый ребенок. Это создает новый ребенок, унаследованный от родительского масштаба. Наследование здесь не будет описано подробно, и в основном это то же самое, что и наследование в объектно-ориентированном.
Во -первых, давайте проанализируем кусок кода:
<div ng-app = "app" ng-init = "name = 'дед"> <div ng-init = "name =' wome '"> первое поколение: {name}} <div ng-init = "name =' son '" ng-controller = "somecontroller"> Второе поколение: {{name}} <div ng-inte = "namon" = "namon". Имя}} </div> </div> </div> </div> </div> </div>Мы обнаружили, что первое поколение, мы инициализируем имя как отца, но второе поколение и третье поколение на самом деле являются одинаковыми сферами, поэтому их имя на самом деле является объектом, поэтому эффект этого заключается в следующем:
Первое поколение: отец
Второе поколение: внук
Третье поколение: внук
Мы изменяем код, чтобы изолировать третье поколение, а затем проверяем эффект:
<div ng-app = "app" ng-init = "name = 'дедушка'"> <div ng-init = "name = 'wome'"> первое поколение: {name}} <div ng-init = "name = 'son'" ng-controller = "somecontroller"> Второе поколение: {{name}} <div ng-inte = "Grand" "namon" = "Grand '" ng-controller = "SecondController"> Третье поколение: {{name}} </div> </div> </div> </div> </div> </div> angular.module ('app', []) .controller ('somecontroller', function ($ scope) {}) .controller ('SecondController', function ($ scope) {})Эффекты следующие:
Первое поколение: отец
Второе поколение: сын
Третье поколение: внук
После изменения кода давайте посмотрим на наследство:
<div ng-app = "app" ng-init = "name = 'дедушка"> <div> первое поколение: {name}} <div ng-controller = "somecontroller"> Второе поколение: {{name}} <div ng-controller = "SecondController"> Theric Deviret: {name}} <//div> <//div> <//diving> <//div> <//div> <//div> <//diving> <//diving> <//diving> <//diving> <//diving> <//diving> <//diving> </div> <//divertroller " </div> </div>Эффекты следующие:
Первое поколение: поцелуй дедушки
Второе поколение: поцелуй дедушки
Третье поколение: поцелуй дедушки
Если вы хотите создать директиву, которая может наследовать объем от внешнего прототипа и установить свойство Scope на True, это просто наследуемая изоляция, то есть оно не может обратно повлиять на родительский объем.
Давайте посмотрим на другой пример:
Angular.Module ('myApp', []) .controller ('maincontroller', function ($ scope) {}) .directive ('mydirective', function () {return {rentrict: 'a', scope: false, // switch {}, true test prapetis: 100, template: '<div> internal: {{{{}, test} ng-model = "myproperty"/> </div> '};HTML -код:
<div ng-controller = 'maincontroller' ng-init = "myproperty = 'hello world!'"> External: {{myproperty}} <input ng-model = "myproperty"/> <div my-directive> </div> </div>Когда мы изменим значение масштаба, мы найдем
Неверно: наследуйте, но не изолируйте
Верно: наследуйте и изолируйте
{}: Изолированные и не унаследованные
Трансклуде
Transclude является дополнительным параметром. Значение по умолчанию неверно. Внедрение часто используется для создания многоразовых компонентов, типичным примером является модальное диалоговое окно или навигационная панель. Мы можем передать весь шаблон, включая инструкции в нем, в одну инструкцию, внедряя его. Внутри директивы может получить доступ к объему внешней директивы, а шаблон также может получить доступ к объектам внешней области. Чтобы пройти область, значение параметра объема должно быть установлено, чтобы выделить область с помощью {} или true. Если параметр области не установлен, область применения внутри директивы будет установлена на область входящего шаблона.
Используйте Transclude: True, только если вы хотите создать директиву, которая может содержать любой контент.
Давайте посмотрим на два примера - навигационная панель:
<div Side-box> <div> <a href = ""> graphics </a> <a href = ""> ng </a> <a href = ""> d3 </a> <a href = ""> Front-end </a> <a href = ""> Startup </a> </div> </div>
JSCODE:
Angular.Module ('myApp', []) .directive ('sidebox', function () {return {ruptrict: 'ea', scope: {title: '@'}, transtate: true, template: '<div> <viv> <h2>' + '{{title}}} </h2> <span ng-transclud });Этот код говорит компилятору NG, чтобы поместить то, что он получает из элемента DOM, где он обнаруживает директиву NG-TransClude.
Давайте посмотрим на пример на официальном сайте:
Angular.Module ('docSisofnBindExample', []) .controller ('Controller', ['$ scope', '$ timeout', function ($ scope, $ timeout) {$ scope.name = 'tobias'; $ scope.hidedialog = function () {$ scope.dialogiden = true; false;my-dialog-close.html
my-dialog-close.html <div> <a href ng-click = "close ()"> × </a> <div ng-transclude> </div> </div>
index.html
<div ng-controller = "controller"> <my-dialog ng-hide = "dialogishidden" on-close = "hidedialog ()"> Проверьте содержание, {name}}! </my-dialog> </div>Если в инструкции используется параметр TransClude, контроллер не может мониторировать изменения в модели данных обычно. Рекомендуется использовать службу $ Watch в функции ссылки.
контроллер [строка или функция]
Параметр контроллера может быть строкой или функцией. При установке на строку конструктор контроллера, зарегистрированного в приложении, будет найден со значением строки в качестве имени.
Angular.Module ('myApp', []) .directive ('MyDirective', function () {RESTRICT: 'A', Controller: 'SomeController'})Встроенный контроллер может быть определен через анонимный конструктор внутри инструкции.
Angular.Module ('myApp', []) .directive ('myDirective', function () {RESTRICT: 'A', Controller: Function ($ scope, $ element, $ attrs, $ transclude) {// Логика контроллера здесь размещается}});Мы можем вводить любую службу NG, которая может быть введена в контроллер, и мы можем использовать его в инструкциях. В контроллере также есть некоторые специальные услуги, которые могут быть введены в инструкции. Эти услуги включают в себя:
1. $ Scope
Текущий объем, связанный с директивным элементом.
2. $ element
Элемент, соответствующий текущей инструкции.
3. $ Attrs
Объект, состоящий из атрибутов текущего элемента.
<div id = "adiv" class = "box"> </div> имеет следующий объект атрибута: {id: "adiv", class: "box"}4. $ transclude
Функция встроенной ссылки будет предварительно подготовлена с соответствующей областью встраивания. Функция Transclude Link - это функция, которая фактически выполняется для элементов клонов и эксплуатации DOM.
Angular.Module ('myApp', []) .directive ('myLink', function () {return {RESTRICT: 'ea', TransClude: True, Controller: Function ($ scope, $ element, $ attrs, $ transclude) {$ transclude (function (clone) {var a = angular.element ('<a>'); A.Text (CLONE.Text ()); }) ;;HTML
<my-link value = "http://www.baidu.com"> baidu </my-link>
<div my-link value = "http://www.google.com"> Google </div>
Рекомендуется использовать TransCludeFN только в параметрах компиляции. Функция ссылки может изолировать инструкции друг от друга, в то время как контроллер определяет повторное поведение. Если мы хотим выставить API текущей инструкции другим инструкциям, мы можем использовать параметр контроллера, в противном случае мы можем использовать ссылку для построения функциональности текущего элемента инструкции (то есть внутренних функций). Если мы используем Scope. $ WATCH () или хотим взаимодействовать с элементами DOM в режиме реального времени, использование ссылок будет лучшим выбором. При внедрении область, отражаемая в сфере применения в контроллере, может отличаться от того, что мы ожидали. В этом случае объект $ scope не может быть гарантированно обновляться нормально. Если вы хотите взаимодействовать с областью прицела на текущем экране, вы можете использовать параметр Scope, переданный в функцию ссылки.
Controlleras [String]
Параметр Controllers используется для установки псевдонима контроллера, чтобы контроллер можно было ссылаться в представлении, даже не вводя применение $.
<div ng-controller = "maincontroller как main"> <input type = "text" ng-model = "main.name"/> <pan> {{main.name}} </span> </div>JSCODE:
Angular.Module ('myApp', []) .controller ('maincontroller', function () {this.name = "kalower";});Псевдоним контроллера позволяет маршрутизации и инструкциям создавать анонимные контроллеры. Эта способность может создавать динамические объекты в контроллерах, а объект изолирован и прост в тестировании.
требуется [String или String []]
Требование - это строка, представляющая имя другой инструкции. Требуется ввести контроллер в инструкцию, которую он определяет, и служит четвертым параметром функции ссылки текущей инструкции. Значение строки или элемента массива - это имя инструкции, которое будет использоваться в области текущей инструкции. В любом случае, компилятор NG будет ссылаться на шаблон текущей инструкции при поиске субконтроллера.
компиляция 【объект или функция】
Сама параметр компиляции не часто используется, но функция ссылки часто используется. По сути, когда мы устанавливаем опцию ссылки, мы фактически создаем функцию ссылки postlink (), чтобы функция compile () могла определить функцию ссылки. Обычно, если функция компиляции установлена, это означает, что мы хотим выполнить операции DOM до того, как инструкции и данные в реальном времени будут введены в DOM. Это безопасно выполнять операции DOM, такие как добавление и удаление узлов в этой функции.
Параметры компиляции и ссылки являются взаимоисключающими. Если эти два параметра установлены одновременно, функция, возвращаемая компиляцией, будет рассматриваться как функция ссылки, а сама параметр ссылки будет игнорирована.
Скомпилированная функция отвечает за преобразование шаблона DOM. Функция ссылки отвечает за связывание объема и DOM. DOM может быть вручную эксплуатируется до того, как прицел будет связан с DOM. На практике такая операция очень редко встречается при написании пользовательских инструкций, но есть несколько встроенных инструкций, которые обеспечивают такие функции.
связь
Compile: function (Tele, Tattrs, transtatefn) {// todo: return function (scope, ele, attrs) {// function function};Функция ссылки необязательна. Если определяется скомпилированная функция, она возвращает связанную функцию, поэтому, когда обе функции определены, составленная функция перегружает связанную функцию. Если наши инструкции просты и не требуют дополнительных настроек, мы можем вернуть функцию из заводской функции (функция обратного вызова), чтобы заменить объект. Если это сделано, эта функция является функцией ссылки.
Нгмодель
Он обеспечивает более базовый API для обработки данных в контроллере. Этот API используется для обработки привязки данных, проверки, обновления CSS и других вещей, которые фактически не управляют DOM. Контроллер NGModel будет введен в инструкции вместе с NGModel, которая содержит некоторые методы. Чтобы получить доступ к NGModelController, необходимо использовать настройки требований.
Общие элементы, используемые NgmodelController, следующие:
1. Чтобы установить значение представления в область, необходимо вызвать функцию ngmodel. $ SetViewValue ().
Метод $ setViewValue () подходит для прослушивания пользовательских событий в пользовательских директивах (таких как использование плагина jQuery с функциями обратного вызова), и мы хотели бы установить $ viewValue и выполнить петли дигеста при вызове.
Angular.Module ('myApp') .directive ('myDirective', function () {return {retement: '? ngmodel', link: function (scope, ele, attrs, ngmodel) {if (! ngmodel) return; $ (function () {ele.datepick Scope. $ Apply (function () {ngmodel. $ setViewValue (date);}); }}; }); }}; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; });2. Метод $ рендеринга может определить конкретный метод визуализации представления
3. Свойства
1 $ viewValue
Свойство $ viewValue содержит фактическую строку, необходимую для обновления представления.
2. $ modelvalue
$ modelValue поддерживается моделью данных. $ modelValue и $ viewValue могут отличаться в зависимости от того, работает ли на нем трубопровод $ parser.
3. $ PARSERS
Стоимость анализаторов $ - это массив функций, где функции называются один за другим в форме трубопроводов. ngmodel Значение считывания из DOM передается в функцию в $ parsers и обрабатывается анализатором в последовательности.
4. $ formatters
Значение $ Formatters - это массив функций, которые называются один за другим в форме трубопровода, когда изменяется значение модели данных. Он не влияет на трубопровод $ parser и используется для форматирования и преобразования значений для отображения в элементах управления с этим ограничением значения.
5. $ ViewChangelisteners
Стоимость $ viewChangelisteners - это множество функций, которые называются одной за другим в форме трубопровода, когда изменение значения в представлении. С $ viewChangelisteners аналогичное поведение может быть достигнуто без использования $ watch. Поскольку возвратное значение игнорируется, эти функции не должны возвращать значения.
6. $ ошибка
Объект ошибки $ содержит имя валидатора, которое не прошло проверку и соответствующую информацию об ошибке.
7. $ PRIDINE
Стоимость $ Prineine является логическим, что может сказать нам, изменил ли пользователь элемент управления.
8. $ Dirty
Стоимость $ Dirty - это противоположность $ Prineine, которая может сказать нам, взаимодействовал ли пользователь с элементом управления.
9. $ Действительно
Допустимое значение $ сообщает нам, есть ли ошибки в текущем элементе управления. Значение неверно, когда есть ошибка, и значение верно, когда нет ошибки.
10. $ неверный
Неверное значение $ сообщает нам, есть ли хотя бы одна ошибка в текущем элементе управления, и его значение противоположна достоверной $.
Вышеуказанное - сборник инструкций и материалов знаний об angularjs. Мы продолжим добавлять их позже. Спасибо за поддержку этого сайта!