angular:angularjs:custom_directive:compile []

Compile в директивах AngularJS

Зачем же нам нужен compile? Compile используется для одной единственной вещи. Чтобы манипулировать самой разметкой нашего елемента и шаблона.

Давайте попробуем. Создадим директиву ui-source

<!DOCTYPE html>
<html lang="en" ng-app='app'>
<head>
    <meta charset="UTF-8">
    <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
  <script>
      var app = angular.module('app', []);
 
      app.directive('uiSource', function () {
          return {
          };
      });
    </script>
</head>
<body>
<ui-source></ui-source>
</body>
</html>

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

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

Теперь давайте напишем html, который мы будем обрамлять.

</code javascript> <ui-source>

<div>
  <label>Name:</label>
  <input type='text' ng-model='yourName' placeholder='Enter a name here'>
  <hr>
  <h1>Hello {{yourName}}</h1>
</div>

</ui-source> </code>

Теперь в нашей директиве напим функцию compile.

На вход мы получаем елемент. Давайте его законсолим. Вот наша разметка вывелась. Вот наш DOM елемент, который нам доступен. Теперь давайте создадим елемент pre, в который мы завернем всю разметку.

compile: function (elem) {
  console.log(elem);
  var pre = angular.element('<pre class="prettyprint"></pre>');
  var pretty = prettyPrintOne(elem.html());
  console.log(pretty);
}

Мы создали DOM елемент и вызвали функцию prettyPrintOne, которая принимает на вход первым параметром html. Давайте посмотрим. Мы видим кусок html и там добавились всякие span, div, которые мы не писали. Это классы prettyPrint, которые потом красиво форматируют наш html.

Дальше мы хотим в елемент pre вставить pretty и заменить шас текущий елемент на новый.

compile: function (elem) {
  console.log(elem);
  var pre = angular.element('<pre class="prettyprint"></pre>');
  var pretty = prettyPrintOne(elem.html());
  pre.append(pretty);
  elem.replaceWith(pre);
}

Итак еще раз

Мы создали новый DOM елемент pre
Мы вызвали функцию библиотеки prettyprint и передали туда наш html
Теперь мы аппендим наш html внутрь pre
И заменяем на наш новые елемент

Как мы видим в браузере, у нас уже красиво выглядит html, какой-то css применился.

Но мы хотим видить код, а не скомпилированный шаблон. Для этого давайте создадим функцию escape, которая заменит открывающие и закрывающие теги.

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

Мы вызвали функцию escape на наш html, чтобы теги не воспринимались браузером. Как мы видим, вся наша разметка уже выводится нормально, так как нам нужно, в виде кода. Если же мы посмотрим в консоль, то мы увидим, что все открывающие и закрывающие теги представляют собой специальные символы, которые воспринимаются браузером как текст, а не теги.

Собственно, вот мы и написали с вами простейшую директиву с compile, которая любой кусок кода сделает красивым.

20-angular-compile-in-directives-master.zip

Инструменты пользователя

Инструменты сайта

Боковая панель

Compile в директивах AngularJS

Инструменты страницы