=====Compile в директивах AngularJS===== Зачем же нам нужен compile? Compile используется для одной единственной вещи. Чтобы манипулировать самой разметкой нашего елемента и шаблона.\\ \\ Давайте попробуем. Создадим директиву ui-source

Эта директива будет у нас принимать внутрь себя кусок html, выводить его на страницу и оборачивать в prettify. Есть такая классная библиотека, называется google-prettify. Вот я ее подключил. Если вы ее подключите, то вам будут доступны функции, которые превращают кусок html в этот же html, но с классами prettify и если вы добавите к ним css, то у вас будет красивая подсвеченая разметка.\\ \\ Сейчас мы попробуем это сделать в виде директивы. Все что вам нужно для работы - это подключать Angular, PrettifyJS и css файл prettify. В css содержаться стили, которые будут применены к нашему html.\\ \\ Теперь давайте напишем html, который мы будем обрамлять.

Name:

Hello {{yourName}}

Теперь в нашей директиве напим функцию compile. На вход мы получаем елемент. Давайте его законсолим. Вот наша разметка вывелась. Вот наш DOM елемент, который нам доступен. {{ :angular:angularjs:custom_directive:directive40.png |}} Теперь давайте создадим елемент pre, в который мы завернем всю разметку.


compile: function (elem) {
  console.log(elem);
  var pre = angular.element('');
  var pretty = prettyPrintOne(elem.html());
  console.log(pretty);
}

Мы создали DOM елемент и вызвали функцию prettyPrintOne, которая принимает на вход первым параметром html. Давайте посмотрим. Мы видим кусок html и там добавились всякие span, div, которые мы не писали. Это классы prettyPrint, которые потом красиво форматируют наш html. {{ :angular:angularjs:custom_directive:directive41.png |}} Дальше мы хотим в елемент pre вставить pretty и заменить шас текущий елемент на новый.


compile: function (elem) {
  console.log(elem);
  var pre = angular.element('');
  var pretty = prettyPrintOne(elem.html());
  pre.append(pretty);
  elem.replaceWith(pre);
}

Итак еще раз - Мы создали новый DOM елемент pre - Мы вызвали функцию библиотеки prettyprint и передали туда наш html - Теперь мы аппендим наш html внутрь pre - И заменяем на наш новые елемент Как мы видим в браузере, у нас уже красиво выглядит html, какой-то css применился. {{ :angular:angularjs:custom_directive:directive42.png |}} Но мы хотим видить код, а не скомпилированный шаблон. Для этого давайте создадим функцию escape, которая заменит открывающие и закрывающие теги.


compile: function (elem) {
  console.log(elem);
  var escape = function (content) {
    return content.replace(/\/g, '>');
  }
  var pre = angular.element('');
  var pretty = prettyPrintOne(escape(elem.html()));
  console.log(pretty);
  pre.append(pretty);
  elem.replaceWith(pre);
}

Мы вызвали функцию escape на наш html, чтобы теги не воспринимались браузером. Как мы видим, вся наша разметка уже выводится нормально, так как нам нужно, в виде кода. Если же мы посмотрим в консоль, то мы увидим, что все открывающие и закрывающие теги представляют собой специальные символы, которые воспринимаются браузером как текст, а не теги. {{ :angular:angularjs:custom_directive:directive43.png |}} Собственно, вот мы и написали с вами простейшую директиву с compile, которая любой кусок кода сделает красивым. ---- {{ :angular:angularjs:custom_directive:20-angular-compile-in-directives-master.zip |}}