使用 ng-include 和本地 webpack 与生产的行为差异答案

【问题标题】：Difference in behavior using ng-include with webpack locally vs production使用 ng-include 和本地 webpack 与生产的行为差异
【发布时间】：2017-09-28 16:49:14
【问题描述】：

我正在使用带有 angular 的 webpack，我有一个带有 ng-include 的 HTML 文件：

<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');

所以现在使用 webpack 构建时，some-view.html 位于 main.bundle.js 中。但是 scope.stringUrl 获取 HTML 内容并且 ng-include 失败（因为它需要一个 url）。

如果我删除 ng-include 而只是放：

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

它可以在生产环境中工作，但不能在本地工作，因为 stringUrl 不会包含 HTML 的内容。

知道如何解决这个问题吗？

提前致谢

以色列

【问题讨论】：

标签： angularjs webpack require angularjs-ng-include

【解决方案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应该引用key（用''封装URL）：

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

现在一切都按预期工作了。

【讨论】：