Разница в поведении при использовании ng-include с веб-пакетом локально против производства

Question

Я использую webpack с angular, у меня есть файл HTML с ng-include:

<ng-include src="stringUrl"  ng-if="true"></ng-include>

В контроллере я устанавливаю stringUrl:

this.$scope.stringUrl = 'app/some-view.html';

Это работает нормально при локальном запуске с "webpack-dev-server", но при сборке с использованием webpack файл main.bundle.js не содержит some-view.html.

Поэтому я попытался изменить контроллер на:

this.$scope.stringUrl = require('app/some-view.html');

Так что теперь при сборке с использованием веб-пакета some-view.html находится внутри main.bundle.js. Но scope.stringUrl получает содержимое HTML, и ng-include завершается неудачно (потому что он ожидает URL).

Если я удаляю ng-include и вместо этого просто ставлю:

<div>{{stringUrl}}</div> 

он будет работать в производственном режиме, но не будет работать локально, потому что stringUrl не будет иметь содержимого HTML.

Есть идеи, как решить эту проблему?

заранее спасибо

Израиль

Answer 1

Я нашел способ работать с ng-include тег в разработке и производстве, используя $templateCache.

Сначала надо вводить $templateCache ($templateCache: ng.ITemplateCacheService), поэтому мы можем использовать его в контроллере / директиве.

Затем положить в $templateCache содержимое файла (используя require):

    this.$scope.stringUrl = $templateCache.put("some-view.html", require("app/some-view.html"));

В файле просмотра тег ng-include должен ссылаться на ключ (с ' ' инкапсулирующим URL):

<ng-include src="'some-view.html'"></ng-include>

Теперь все работает как положено.