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

Могу поспорить, что на этот вопрос уже где-то ответили, но я ничего не понимаю.

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

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

  • компонент.js
  • component_template.html
  • другое_html.html

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

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 в процессе?

Спасибо


webpack javascript html angularjs ng-template
person Jasman    schedule 11.07.2016    source источник
comment
вы можете использовать template вместо templateUrl   -  person batmaniac7    schedule 12.07.2016
comment
почему бы вам не сделать директиву для внешнего шаблона и не использовать ее. это поможет вам во многих отношениях, таких как повторное использование, ремонтопригодность...   -  person Varit J Patel    schedule 12.07.2016
comment
@ varit05 - Кажется излишним просто вставлять какой-то внешний HTML-код в мой контроллер, чтобы назначить ввод в другой директиве. Я полагаю, что было бы неплохо добавить функциональность в мою директиву упаковки, чтобы выполнять работу по импорту контента из внешнего html, но я нахожусь в процессе большой работы над большим проектом, и просто выполнять работу в контроллере хорошо достаточно пока.   -  person Jasman    schedule 12.07.2016

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

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

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

person Jasman    schedule 11.07.2016