AngularJS: Создаем динамический контент

2014-09-05

Здесь речь пойдет о специфике шаблонов в AngularJS.
Бывают ситуации, когда нам нужно динамически определить шаблон, или фрагмент теста с динамическими вставками по ходу выполнения кода.

Допустим — наш шаблон в директиве может чем-то отличатся в разных ситуациях, или мы формируем некое отображение на основе динамических данных полученных с сервера.

В общем сделать это можно, и это делается так:


// Допустим, у нас есть какой-то текст,
// который должен стать динамичным с привязкой к $scope
var html = '<span>До конца осталось <b>{{countdown}}</b> секунд...</span>';
// 1: Превратим наш HTML в DOM-элемент
var template = angular.element(html);
// 2: Скомпилируем наш шаблон
var linkFn = $compile(template);
// 3: Свяжем скомпилированный шаблон со скопом
var element = linkFn(scope);
// 4: Добавим элемент в общее дерево (если нужно)
parent.appendChild(element);

Новый DOM-элемент может и не создаваться, а может быть взят существующий с дерева.

Это может выглядеть примерно так:

$compile(angular.element('#synamic-content'))($scope);

Также, обратите внимание, что $compile и scope должны быть доступны (допустим — получены через депенденси инджекшны).

Более подробно можно почитать тут: https://docs.angularjs.org/guide/compiler



2 комментария на «AngularJS: Создаем динамический контент»

  1. Алексей:

    А полный пример в месте с рабочим $compile нельзя было сделать. или вы сами не понимаете что происходит а просто копипастите.

  2. admin:

    Эту заметку я сделал для того, чтобы в очередной раз в будущем не разбираться с тем же кодом, так как столкнулся с этим уже 2 раза.
    Данная заметка рассчитана на «продвинутых» пользователей Angular и её целью не является объяснение депенденси инджекшенов и прочих основ фреймворка.
    Вот я для вас набросал примерчик как это может работать: http://jsfiddle.net/9equcytn/ но не хотелось бы этим примером вводить людей в заблуждение, так как для данной приведенной цели намного лучше подходит использование темплейтов, а конкретно этот код хорошо употреблять в случае когда мы заранее не знаем какой будет наш шаблон и он каким-то специфичным образом генериться в риалтайме либо мы его получаем удаленно.

Добавить комментарий