Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Как встроить HTML в директиву? (https://javascript.ru/forum/angular/42986-kak-vstroit-html-v-direktivu.html)

Shitbox2 17.11.2013 14:41

Как встроить HTML в директиву?
 
Ко мне приходит JSON файл вида [{html: '...', pos: '', ...}, ...]

Нужно превратить его в список ng-repeat, чтобы в каждый элемент (или вместо каждого) был вставлен шаблон из html. Можно засунуть html в js-вставку, превратив его в шаблон. и вставлять с помощью ng-include, но как-то это коряво. Можно конкретно для этого html создавать отдельную директиву в цикле, где в качестве template указывать значение из html, но это кажется тяжеловесным. Пробовал экспериментировать с ng-transclude, но она вставляет как строку. Еще есть $compile, но почему-то кажется, что как-то по-другому это делается. Как бы вы поступили?

nerv_ 17.11.2013 14:58

если приходящий html содержит ангуляр выражения или директивы - $compile
http://angular.ru/api/ng.$compile

еще есть такая штука
http://angular.ru/api/ng.$templateCache
http://egghead.io/lessons/angularjs-templatecache

и не совсем понятно, зачем гонять html, если можно json?

Shitbox2 17.11.2013 15:29

Не, выражений там точно не будет. ХТМЛ, т.к. это произвольные рекламные блоки с разной версткой. Иногда картинка, иногда ХТМЛ, иногда даже флеш.

С templateCache прикольно. Забыл уже что там можно так кэшировать шаблоны. Но все-равно придется сначала в цикле закэшировать все шаблоны, а потом насоздавать отдельных директив с разными шаблонами. Наверное, compile тут больше подходит.

Там есть вторая проблема. Как бы вставить все эти элементы в ДОМ за один раз. Т.е. должно быть что-то вроде
<div ng-repeat="item in items">{{$compile(item.html)}}</div>

nerv_ 17.11.2013 15:57

я юзаю версию 1.1.5, там можно так

<div ng-repeat="item in items">
    <div ng-bind-html-unsafe="item"></div>
</div>

http://angular.ru/api/ng.directive:ngBindHtmlUnsafe

Shitbox2 17.11.2013 16:25

Заработало! Мне и обычный ngBindHtml подходит, только к нему нужно ngSanitize подключать, который в отдельном файле лежит. А я-то думал, чего он у меня на весь html ругается)

В версии 1.2 немного другая система: http://docs.angularjs.org/api/ng.$sce#example

Shitbox2 17.11.2013 17:28

Есть идеи, как сделать, чтобы html заменял собой директиву? (а не вставлялся внутрь)


Часовой пояс GMT +3, время: 01:38.