В этом уроке используется версия AngularJS: 1.5.3
Angularjs github: https://github.com/angular/angular.js/
Angularjs Скачать адрес: https://angularjs.org/
Аннотация: Директива (инструкции) Автор считает, что это одна из очень мощных и полезных функций AngularJ. Это эквивалентно написанию публичного пользовательского элемента DOM или атрибута класса или атрибута атрибута для нас, и это не только это, вы также можете манипулировать масштабами, связывать события, стили изменений и т. Д. На основе. Благодаря этой директиве мы можем инкапсулировать многие публичные инструкции, такие как инструкции по подготовке, инструкции по автоматическому завершению и т. Д. Затем вам нужно написать только одну строку кода на странице HTML для достижения многих мощных функций. Вообще говоря, директива должна быть использована, чтобы иметь следующие сценарии:
1. Сделайте свой HTML более семантическим, и вам не нужно изучать код и логику в глубине, чтобы узнать общую логику страницы.
2. Аннотация на заказ компонент и повторно используйте его в другом месте.
1. Определение директивы и ее метода использования
Определение директивы AngularJS примерно следующим образом
angular.module ("app", []). Directive ("DiMiMevivename", function () {return {// определить путем настройки элементов};})Директива может быть размещена в именах элементов, атрибутах, классах и комментариях. Ниже приведен эквивалентный способ цитировать Mydir, директиву. (Но многие директивы ограничены использованием «свойств»)
<span <span style = "font-family: arial, helvetica, sans-serif;"> Directive-name </span> <span style = "font-family: arial, helvetica, sans-serif;"> = "exp"> </span> // Sans-serif; "> Directive-name </span >> </<span style =" font-family: arial, helvetica, sans-serif; "> Directive-name </span >> </<span style =" font-family: arial, helvetica, sans-serif; "> Directive-name </span >> </<span Style =" font-famile: arial: arial: arial: arial: arial: arial: arial: arial: arial: arvetition: sans-serif; "> Directive-name </span >> // element <!-Директива: <span style =" font-family: arial, helvetica, sans-serif; "> Directive-name </span> <span style =" font-family: arial, helvetica, sans-serif; "exp-> // Примечания </span>
Следующий пример:
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "UTF-8"> <Title> Введение в AngularJs </title> <script type = "text/javascript" src = "./ 1.5.3/angular.js. <Hello-world> </hello-world> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); app.directive ('helloworld', function () {return {rupprict: 'e', шаблон: '<div> hi im anm lin bingwen ~~~ </div>', reply: true};}); </script> </html>результат:
Ниже приведена подробная версия директивы
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) {...}};2. Интерпретация контента директивной команды
Вы можете видеть, что в нем есть 8 содержимого
1. Спрятать
(Строка) необязательные параметры указывают форму инструкции, объявляемой в DOM; Значения: e (element), a (атрибут), c (класс), m (нотация), а значение по умолчанию - a; Конечно, два также могут быть использованы вместе, такие как EA. Представление может быть либо элементом, либо атрибутом.
[html] Просмотреть простой копии фрагменты кода на код, полученный для моего фрагмента кода
E (element): <Dimemename> </dimemiviviname>
A (свойство): <div Dististiviname = 'Expression'> </div>
C (класс): <div class = 'DiMiMeviename'> </div>
M (примечание): <-Директива: экспрессия DiMiMeviename->
Вообще говоря, E/A/C используется чаще.
2. Профейр
(номер), необязательные параметры, укажите приоритет инструкции. Если на одном DOM есть несколько инструкций, более высокий приоритет будет выполнен первым;
3. концевой
(Boolean), необязательный параметр, может быть установлен на True или False. Если установить на True, другие инструкции с приоритетом ниже, чем эта инструкция, будут недействительными и не будут вызваны (то, что с тем же приоритетом все еще будет выполнена)
4. Потеря (строка или функция) дополнительные параметры, которые могут быть:
(1) кусок текста HTML
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "UTF-8"> <Title> Введение в AngularJs </title> <script type = "text/javascript" src = "./ 1.5.3/angular.js. <Hello-world> </hello-world> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); app.directive ('helloworld', function () {return {restrict: 'e', шаблон: '<div> <h1> hi i am am in lin bingwen ~~~ </h1> </div>', заменить: true};}); </script> </html>(2) Функция может принять два параметра Telement и Tattrs
Там, где Telement относится к элементу, который использует эту директиву, а Tattrs является атрибутом экземпляра, который представляет собой коллекцию (объект), состоящий из всех атрибутов на элементе, таких как:
<hello-world2 title = 'Я вторая директива'> </hello-world2>
Название является атрибутом на татуировках
Посмотрим, что происходит, когда шаблон является функцией
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "UTF-8"> <Title> Введение в AngularJs </title> <script type = "text/javascript" src = "./ 1.5.3/angular.js. <Hello-world> </hello-world> <hello-world2 title = 'Я вторая директива'> </hello-world2> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); app.directive ('helloworld', function () {return {restrict: 'e', шаблон: '<div> <h1> hi i am am in lin bingwen ~~~ </h1> </div>', заменить: true};}); app.directive ("helloworld2", function () {return {restrict: 'eAc', template: function (telement, tattrs) {var _html = ''; _html += '<div>' +'hello' +tattrs.title +'</div>'; return _html; </script> </html>результат:
Вы можете видеть, что поле заголовка в теге в Hello-World2 также используется в директиве.
5.templateurl (строка или функция), необязательный параметр, может быть
(1) строка, представляющая путь HTML -файла
(2) Функция может принять два параметра Telement и Tattrs (приблизительно так же, как и выше)
ПРИМЕЧАНИЕ. Во время локальной разработки вам необходимо запустить сервер, в противном случае использование шаблона приведет к ошибке сценария запроса перекрестного происхождения (CORS). Поскольку загрузка шаблонов HTML загружается асинхронно, загрузка большого количества шаблонов замедлит веб -сайт. Вот трюк, который должен сначала кэшировать шаблон
Вы можете загрузить свою страницу индекса и включить следующий код как часть вашей страницы.
<script type = 'text/ng-template' id = 'hello.html'> <div> <h1> hi im Am Am Am Lin Bingwen ~~~ </h1> </div> </script>
Атрибут ID здесь установлен на шаблоне.
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "UTF-8"> <Title> Введение в AngularJs </title> <script type = "text/javascript" src = "./ 1.5.3/angular.js. <Hello-world> </hello-world> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); app.directive ('helloworld', function () {return {Rentrict: 'e', templateurl: 'hello.html', replace: true};}); </script> <script type = 'text/ng-template' id = 'hello.html'> <div> <h1> hi im Am Am Am Am Am Lin Bingwen ~~~ </h1> </div> </script> </html>Результат вывода:
Другой способ кеша - это:
app.run (["$ templatecache", function ($ templatecache) {$ templatecache.put ("hello.html", "<div> <h1> hi i am in lin bingwen ~~~ </h1> </div>");}]);Примеры использования следующие:
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "UTF-8"> <Title> Введение в AngularJs </title> <script type = "text/javascript" src = "./ 1.5.3/angular.js. <Hello-world> </hello-world> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); app.directive ('helloworld', function () {return {Rentrict: 'e', templateurl: 'hello.html', replace: true};}); app.run (["$ templatecache", function ($ templatecache) {$ templatecache.put ("hello.html", "<div> <h1> hi i am in lin bingwen ~~~ </h1> </div>");}]); </script> </html>результат:
На самом деле, первый метод лучше, он будет быстрее написать. У автора больше всего и первый метод для написания, который напрямую включен в SCPRIT.
6. Поместите
(Логическое значение), значение по умолчанию неверно. При задании TRUE, давайте посмотрим на следующий пример (сравнивайте примеры, приведенные в шаблоне)
Когда заменить верно, тега Hello-World больше нет, в противном случае он существует.
7.scope
(1) Значение по умолчанию неверно. Указывает на наследование родительского масштаба;
(2) Верно. Указывает унаследование родительского масштаба и создание собственного объема (детского масштаба);
(3) {}. Указывает создание совершенно новой изоляции;
7.1 Во -первых, давайте поймем механизм наследования масштаба. Давайте использовать команду NG-Controller в качестве примера.
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "utf-8"> <Title> Введение в AngularJs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js"> </javascript ". ng-controller = 'maincontroller'> отец: {{name}} <input ng-model = "name"/> <div my-directive> </div> </div> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); app.controller ('maincontroller', function ($ scope) {$ scope.name = 'lin bingwen';}); app.directive ('myDirective', function () {return {restrict: 'ea', scope: false, template: '<div> son: {{name}} <input ng-model = "name"/> </div>'};}); </script> </html>Далее мы используем простой и четкий пример, чтобы проиллюстрировать различия в значениях области:
Область: ложь
Область: верно
объем:{}
Когда неверно, сын наследует ценность отца и меняет ценность отца, а ценность сына также меняется, и наоборот. (Наследование не изолировано)
Когда это правда, сын наследует ценность отца и меняет ценность отца. Ценность сына меняется соответственно, но когда стоимость сына меняется, ценность отца остается неизменной. (Наследование и изоляция)
Когда {}, ценность отца не унаследована, поэтому ценность сына пуста. Изменение стоимости любой из сторон не может повлиять на значение другой стороны. (Нет наследования и изоляции)
Совет: Изоляция областей - хороший выбор, когда вы хотите создать многоразовый компонент. Изолируя область областей, мы гарантируем, что директивы являются «независимыми» и могут быть легко вставлены в любое приложение HTML, и этот подход предотвращает загрязнение применения родителей;
7.2 Изоляционные прицелы Вы можете получить доступ к свойствам родительского объема с помощью политики связывания.
Директива предоставляет три способа взаимодействия с местами вне изоляции при использовании изоляции. Эти три
@ Приведите атрибут локального объема с значением свойства текущего узла DOM. Результатом всегда является строкой, потому что атрибут DOM является строкой.
& Предоставляет способ выполнить выражение в контексте родительского масштаба. Если имя ATTR не указано, имя атрибута - одно и то же локальное имя.
= Создайте двустороннюю привязку между атрибутом локального объема и именем атрибута Parent Scope через значение атрибута директивного атрибута.
@ атрибут локальной области
@ Метод локальные атрибуты используются для доступа к значениям строк, определяемой директивой внешней среды, в основном привязывая значения внешней строки через атрибут тега, где находится директива. Это связывание одностороннее, то есть изменения связывания родительского масштаба. Свойства прицела в директиве будут меняться синхронно, в то время как изменения в области привязки изолированы, а родительская область не известна.
В следующем примере: Директива заявляет, что тип объема не изолирован, и использует атрибут @ sinting name, и использует атрибут имени для привязки атрибута в родительской области в директиве. При изменении значения атрибута в родительском объеме директива будет обновлять значение синхронно. При изменении значения свойства значения свойства свойства с масштабами директивной масштабов, родительский объем не может обновлять значение синхронно.
JS -код:
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "utf-8"> <Title> Введение в AngularJs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js"> </javascript ". ng-controller="myController"> <div> <div> Parent scope: <div>Say: {{name}}<br>Change the name of the parent scope: <input type="text" value="" ng-model="name"/></div> </div> <div>isolated scope: <div isolated-directive name="{{name}}"></div> </div> <div> изолированная область (не используя родительскую область {{name}}): <div изолированное направление name = "name"> </div> </div> </div> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); app.controller ("mycontroller", function ($ scope) {$ scope.name = "hello world";}). Directive ("изолированная литература", function () {return {scope: {name: "@"}. ng-model = "name"> '}; </script> </html>Результаты: начальный эффект страницы
Эффект анимации:
Вы можете видеть, что содержание на родительском масштабах изменилось, и пример ребенка изменился одновременно. И контент на подсказке изменился. Это не влияет на содержание на родительском объеме!
= локальный атрибут области
= Создайте двустороннюю привязку между атрибутом локального объема и именем атрибута Parent Scope через значение атрибута директивного атрибута.
Это означает, что когда вы хотите двустороннее свойство, вы можете использовать = для введения внешних свойств. Независимо от того, изменяет ли родительскую область объема или изоляции свойств в области прицела, родительский объем и объем изоляции будут обновлять значения свойства одновременно, потому что они являются двусторонними связанными отношениями.
Пример кода:
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "utf-8"> <Title> Введение в AngularJs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js"> </javascript ". ng-controller="myController"> <div>Parent scope: <div>Say: {{user.name}}<br>Change the name of the parent scope: <input type="text" value="" ng-model="userBase.name"/></div> </div> <div>isolated scope: <div isolated-directive user="userBase"></div> </div> </div> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); app.controller ("mycontroller", function ($ scope) {$ scope.userbase = {name: 'hello', id: 1};}). Directive ("IsolatedDirective", function () {return {scope: {user: "="}, шаблон: 'say: {{use use inam type = "buttom" value = "" ng-model = "user.name"/> '}}) </script> </html>Эффект:
Вы можете видеть, что содержание на родительском масштабах и масштабах ребенка всегда одинаковы!
и атрибуты локальной области
Метод и метод предоставляет способ напрямую выполнить выражение в контексте мастерской. Это выражение может быть функцией.
Например, когда вы пишете директиву, когда пользователь нажимает кнопку, директива хочет уведомить контроллер, контроллер не может знать, что происходит в директиве. Может быть, вы можете сделать это, используя трансляцию событий в Angular, но вы должны добавить метод прослушивания событий в контроллер.
Лучший способ - позволить директиве пройти функцию в родительской масштабах. Когда в директиве есть какое -либо действие, которое необходимо обновить в родительскую область, часть кода или функции может быть выполнена в контексте родительского объема.
Следующий пример выполняет функцию родительского объема в директиве.
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "utf-8"> <Title> Введение в AngularJs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js"> </javascript ". ng-controller = "myController"> <div> parent scope: <div> say: {{value}} </div> </div> <div> Изолированная область: <div Изолированное действие = "Clic []); app.controller ("mycontroller", function ($ scope) {$ scope.value = "hello world"; $ scope.click = function () {$ scope.value = math.random ();};}). Directive ("isolatedDirective", function () {return {action: {action: "&", кнопку tomplate: "tomplate:" inpate: "stamplate:" value = "Выполнить метод определения применения родителей в директиве" ng-click = "action ()"/> '}}) </script> </html>Эффект:
Есть много содержимого инструкций, давайте поговорим о Transclude, Compline, Link и Controller.
8. TransClude
Если вы не хотите, чтобы контент внутри директивы был заменен шаблоном, вы можете установить это значение на TRUE. Как правило, его необходимо использовать с директивой ngtransclude. Например: шаблон: «<div> Привет, каждый <div ng-transclude> </div> </div>», в настоящее время содержание внутри инструкции будет встроено в NG-transclude Div. То есть это становится <div> Привет, каждый <div> Это контент внутри команды </div> </div>. Значение по умолчанию неверно; Этот параметр конфигурации позволяет нам извлечь контент, содержащийся в директивном элементе, а затем поместить его в определенную позицию в шаблоне директивы. Когда вы включите TransClude, вы можете использовать NG-TransClude, чтобы указать, где разместить переведенный контент
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <Head> <meta charset = "UTF-8"> <Title> Введение в AngularJS </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js> </javascript" src = "./15.3/angular.min.js> </javaScript> </src =" ./15.3/angular.min.js> </javaScript> </src = "./. ссылка </li> <li> Вторая ссылка </li> </ul> </div> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); app.directive ('sidebox', function () {return {ограничить: 'ea', scope: {title: '@'}, translate: true, template: '<div>/ <div>/ <h2> {{title}} </ h2>/ <span ng-dersclude>/ </ span>/ </ div>/ </ h2>; </script> </html>результат:
Когда Transclude: ложь,
Если в инструкции используется параметр TransClude, контроллер не может мониторировать изменения в модели данных обычно. Рекомендуется использовать службу $ Watch в функции ссылки.
9.controller
Это может быть строка или функция.
Если это строка, используйте строку в качестве имени контроллера, чтобы найти конструктор контроллера, зарегистрированного в приложении.
Angular.Module ('myApp', []) .Directive ('myDirective', function () {RESTRICT: 'A', // CONTROLLER: 'SomeController'}) // Другие места в приложении могут быть тем же файлом или другим файлом, содержащимся в index.html Angular.Module ('myApp') .controller ('somecontroller', $ lection, $ lection, $ scroporope ', $ venceprollor $ attrs, $ transclude) {// логика контроллера размещена здесь}); Его также можно определить как анонимные функции непосредственно внутри инструкции, и мы можем ввести любую услугу здесь ($ log, $ timeout и т. Д.) {// Логика контроллера размещена здесь}});Есть также некоторые специальные услуги (параметры), которые могут быть введены
(1) $ Scope, объем, связанный с директивными элементами
(2) $ элемент, элемент, соответствующий текущей инструкции
(3) $ attrs, объект, состоящий из атрибутов текущего элемента
(4) $ transclude, встроенная функция ссылки, фактически выполненные функции, используемые для клонирования элементов и эксплуатации DOM
Примечание. Если это не используется для определения некоторого повторного использования, оно, как правило, здесь не рекомендуется.
Функции контроллера и ссылки инструкции (для обсуждения позже) могут быть взаимозаменяются. Разница состоит в том, что контроллер в основном используется для обеспечения поведения, которое можно повторно использовать между инструкциями, но функция связи ссылки может определять поведение только в текущих внутренних инструкциях и не может быть повторно использована между инструкциями.
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <Head> <meta charset = "utf-8"> <Title> Введение в angularjs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js"> </javascript "src =" ./ 1.5.3/angular.js. Am Lin Bingwen ~~~ </hello> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); app.directive ('hello', function () {return {ограничить: 'ea', transclude: true, // Обратите внимание, что он должен быть установлен на истинный контроллер: функция ($ scope, $ element, $ attrs, $ transclude, $ log) {// Здесь вы можете внедрить услугу, которую вы хотите ввести $ transclude (clone) {var a = angular. $ attrs.mycolor); </script> </html>Результат вывода:
И выводить привет всем под консоли
Давайте посмотрим на $ transclude (); Здесь может потребоваться два параметра: первый $ recope, сфера действия, а второй - функция обратного вызова с клоном параметра. И этот клон на самом деле является встроенным контентом (обернутым jQuery), и вы можете выполнить много операций DOM.
Его самый простой способ - это
<script> angular.module ('myApp', []). Directive ('mySite', function () {return {ограничить: 'ea', transclude: true, controller: function ($ scope, $ element, $ attrs, $ transclude, $ log) {var a = $ transclude (); // $ transclude (). </script>Примечание. Использование $ transclude генерирует новую область.
По умолчанию, если мы просто и практически используем $ transclude (), то область по умолчанию - это область применения $ transclude
Но если мы используем $ transclude ($ scope, function (клон) {}), то область - это область директивы
Затем возникает вопрос снова. Что если мы хотим использовать применение родителей
$ scope. $ может быть использован
Точно так же, если вы хотите новую область, вы также можете использовать $ scope. $ Parent.new ();
10.controlleras
Эта опция используется для установки псевдоним вашего контроллера
В прошлом мы часто использовали этот метод для написания кода:
angular.module ("app", []) .controller ("democontroller", ["$ scope", function ($ scope) {$ scope.title = "angualr";}]) <div ng-app = "app" ng-controller = "democontroller"> {{title} </div> div> div> div> div> div> div> div> div> div> div> div> div> div> div> div>Позже Angularjs1.2 принес нам новый синтаксис сахар, поэтому мы можем написать это так
angular.module ("app", []) .controller ("democontroller", [function () {this.title = "angualr";}]) <div ng-app = "app" ng-controller = "democontroller как demo"> {{demo.title} </div>Мы также можем написать это в команде
<script> angular.module ('myApp', []). Directive ('mySite', function () {return {ограничить: 'ea', transclude: true, controller: 'someecontroller', controlleras: 'maincontroller' //.. Другая конфигурация};}); </script>11.Require (строка или массив)
Строка представляет имя другой инструкции, которая будет использоваться в качестве четвертого параметра функции ссылки. Мы можем привести пример, чтобы проиллюстрировать конкретное использование. Предположим, мы должны написать две инструкции сейчас. В функции ссылки есть много перекрывающихся методов (функция ссылки будет обсуждаться позже). В настоящее время мы можем написать эти повторяющиеся методы в контроллере третьей инструкции (контроллер также упоминается выше, чтобы обеспечить поведение повторного использования между инструкциями). Затем в этих двух инструкциях требуется инструкция с полем контроллера (третья инструкция).
Наконец, вы можете ссылаться на эти перекрывающиеся методы через четвертый параметр функции ссылки ссылки.
<!doctype html> <html ng-app="myApp"> <head> <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script> </head> <body> <outer-directive> <inner-directive></inner-directive> <inner-directive2> </inner-directive2> </uper-directive> <script> var app = angular.module ('myApp', []); app.directive ('Overdirective', function () {return {racpope: {}, ограничение: 'ae', controller: function ($ acpope) {this.say = function (nomedirective) {console.log ('at:' + undirective.message);};}};};}); app.directive ('innerdirective', function () {return {racpope: {}, ограничить: 'ae', reft: '^overdirective', link: function (сфера, элемент, атрис, контроллеровский) {scope.message = "hi, leifeng"; app.directive ('innerDirective2', function () {return {racpe: {}, ограничить: 'ae', reft: '^overdirective', link: function (acpope, elem, attrs, controllerstance) {scope.message = "hi, shushu"; </script> </body> </html>Инструкции по внутренней и директивной InnerDirective2 в приведенном выше примере методов повторного использования, определенных в контроллере директивы Overdirective.
Кроме того, объясняется, что контроллер в инструкции используется для общения между различными инструкциями.
Кроме того, мы можем добавить префикс к значению параметра потребности, которое изменит поведение контроллера поиска:
(1) Без префикса инструкция будет поиск в контроллере, предоставленном сам по себе. Если контроллер не найден, ошибка будет выброшена.
(2)? Если требуемый контроллер не найден в текущей инструкции, NULL будет передано четвертому параметру функции соединения ссылки
(3)^Если требуемый контроллер не найден в текущей инструкции, контроллер родительского элемента будет найден
(4)?^ Комбинация
12. Процесс сборки инструкций Ангуара
Сначала загрузите библиотеку AngularJS и найдите директиву NG-APP, чтобы найти границы приложения.
Позвоните в Compil Service для компиляции в соответствии с объемом, определенным NG-APP. AngularJS будет пересекать весь HTML -документ и обрабатывать инструкции, объявленные на странице в соответствии с приоритетом инструкций в соответствии с инструкциями. DOM преобразуется в соответствии с параметрами конфигурации (шаблон, место, Transclude и т. Д.) В инструкциях, а затем начинает выполнять функцию компиляции каждой инструкции в порядке (если функция компиляции определена на инструкции) для преобразования самого шаблона.
ПРИМЕЧАНИЕ. Функция компиляции здесь настроена в нашей директиве, которая отличается от услуги $ Compil, упомянутой выше. После выполнения каждой функции компиляции будет возвращена функция ссылки, и все функции ссылки будут объединены в большую функцию ссылки.
Затем будет выполнена эта большая ссылка, в основном для привязки данных, динамически изменяя данные в области области путем регистрации слушателя на DOM, или используя $ Watchs для прослушивания переменных в области применения для изменения DOM, тем самым установив двустороннюю привязку и т. Д., Если функция компиляции не настроена в нашей инструкции, функция ссылки, которую мы настроили. То, что она делает, примерно так же, как большая функция связи, синтезируемая всеми функциями ссылки после возврата компиляции выше.
Следовательно: в директиве параметры компиляции и ссылки являются взаимоисключающими. Если эти два параметра установлены одновременно, функция, возвращаемая компиляцией, будет рассматриваться как функция ссылки, а сама параметр ссылки будет игнорирована.
13. Компиляция функции
Функция компиляция (Telement, Tattrs, TransClude) {...}
Функции компиляции используются для обработки ситуаций, когда необходимо изменить шаблон DOM. Поскольку большинство инструкций не требуют модификации шаблона, эта функция обычно не используется. Примеры, которые необходимо использовать, включают NGTREPEAT, который требует изменения шаблона, а NGVIEW требует, чтобы содержимое было загружено асинхронно. Скомпилированная функция принимает следующие параметры.
Telement - элемент шаблона - элемент, в котором находится директива. Это безопасно деформировать этот элемент и его подэлементы.
TATTRS - Атрибуты шаблона - все атрибуты, объявленные директивой по этому элементу, используются в скомпилированной функции.
Transclude - функция встроенной ссылки (Scope, ClonelingFn).
Примечание. Не выполняйте никаких операций, кроме деформации DOM в скомпилированной функции. Что еще более важно, регистрация событий прослушивания DOM должна быть выполнена в связанной функции, а не в скомпилированной функции.
Скомпилированная функция может вернуть объект или функцию.
Функция возврата - эквивалентна функции ссылки, зарегистрированной с использованием атрибута ссылки объекта конфигурации, когда компилированная функция не существует.
Возвращение объекта - возвращает объект, который зарегистрировал функцию через атрибут Pre или Post. Обратитесь к объяснению функций предварительного связывания и постжонка ниже.
14. Связывание функции
Ссылка на функцию (Scope, iElement, Iattrs, Controller) {...}
Функция ссылки отвечает за регистрацию событий DOM и обновление DOM. Он выполняется после того, как шаблон клонирован, и это также там, где написано большинство логических кодов инструкций.
Сфера применения - область, которую директивы должны слушать.
IELEMENT - Элемент экземпляра - элемент, где находится директива. Безопасно работать на детских элементах элементов в функции после линии линии, потому что тогда все они связаны.
IATTRS - Атрибуты экземпляра - Атрибуты экземпляра, стандартизированный список атрибутов, объявленных в текущем элементе, которые передаются среди всех связанных функций.
Контроллер - экземпляр контроллера, то есть контроллер внутри Direct2, запрашиваемый текущей инструкцией. Например: Controller: function () {this.AddStrength = function () {}} в директиве Direct2, тогда, в функции ссылки текущей директивы, вы можете вызвать ее через Controller.AddStrength.
Функция предварительной связи выполняет до того, как дочерние элементы будут связаны. Он не может быть использован для деформирования DOM в случае, если функция ссылки не сможет найти правильный элемент для ссылки.
Функция после связывания Все элементы выполняются после связи.
иллюстрировать:
Сама параметр компиляции не часто используется, но функция ссылки часто используется. По сути, когда мы устанавливаем опцию ссылки, мы фактически создаем функцию ссылки postlink (), чтобы функция compile () могла определить функцию ссылки. Как правило, если функция компиляции установлена, это означает, что мы хотим выполнить операции DOM до того, как инструкции и данные в реальном времени будут введены в DOM. Это безопасно выполнять операции DOM, такие как добавление и удаление узлов в этой функции. Параметры компиляции и ссылки являются взаимоисключающими. Если эти два параметра установлены одновременно, функция, возвращаемая компиляцией, будет рассматриваться как функция ссылки, а сама параметр ссылки будет игнорирована. Функция перевода отвечает за преобразование шаблона DOM. Функция ссылки отвечает за связывание объема и DOM. DOM может быть вручную эксплуатируется до того, как прицел будет связан с DOM. На практике такая операция очень редко встречается при написании пользовательских инструкций, но есть несколько встроенных инструкций, которые обеспечивают такие функции. Функция ссылки необязательна. Если определяется скомпилированная функция, она возвращает связанную функцию, поэтому, когда обе функции определены, составленная функция перегружает связанную функцию. Если наши инструкции просты и не требуют дополнительных настроек, мы можем вернуть функцию из заводской функции (функция обратного вызова), чтобы заменить объект. Если это сделано, эта функция является функцией ссылки.
Эта статья воспроизводится http://blog.csdn.net/evankaka
Вышеуказанное - все содержание использования AngularJS: Директива, я надеюсь, что это будет полезно для каждого обучения.