Каков правильный способ импорта и компиляции внешнего HTML в угловой контроллер?

Question

Держу пари, на этот вопрос уже что-то ответили, но я прихожу пустым.

Я использую Angular 1.5.7 и хочу импортировать некоторый внешний HTML в моем проекте в компонентный контроллер (для использования в всплывающей подсказке), и я не могу понять, как это сделать.

Моя структура в папке просто так:

• component.js
• component_template.html
• other_html.html

Я попытался следующие, используя WebPack с загрузчиками html и ngTemplate (настроен в моей конфигурации webpack): над декларацией моего контроллера я добавляю

import other_html from './other_html.html'; 

который точно как я получаю шаблон для просмотра (и который работает без дальнейшей суматохи):

import component_template from './component_template.html'; 
angular.module(module).component('name', {templateUrl: component_template}, ...); 

Внутри контроллера компонента, я пробовал различные комбинации $ sce.trustAsUrl, $ sce.getTrustedHtml и $ sce.getTrustedUrl, чтобы развернуть содержимое моего внешнего HTML (в переменной «other_html») в виде строки, но, откровенно говоря, эти вещи меня просто путают, а документация не помогает. Также кажется, что мне нужно будет скомпилировать результирующую строку в области моего контроллера, но сначала мне нужна строка HTML (я продолжаю констатировать строку URL).

Может ли кто-нибудь продемонстрировать для меня лучший способ сделать это, используя или не полагаясь на WebPack и загрузчики html и ngTemplate в этом процессе?

Thanks

Answer 1

Отвечая на мой вопрос. Не совсем мое идеальное решение, потому что я не компилирую какие-либо значения из импортированного HTML, поэтому я разбиваю его на более мелкие фрагменты.

Прежде всего, я не должен был использовать ngTemplate в миксе для этой цели. Во-вторых, путь вокруг этого заключается в том, чтобы префикс вашей цепи загрузчика с восклицательным знаком, чтобы переопределить значение по умолчанию из вашей конфигурации webpack.

Таким образом, это работает, чтобы предоставить мне строки мне нужно:

var other_template = require('!html!./other_template.html');

Поскольку я использую строку для заполнения всплывающей подсказки (JQuery tipso с директивой оберточной) и требует только значения, доступного в обратном вызове $ onInit моего компонента, я не думаю, что у меня даже есть возможность скомпилировать его с моей областью до того, как она закончится как выход. Но в других случаях я уверен, что смогу скомпилировать его, и все будет работать должным образом.

Надеюсь, что это помогает другим.