0

我敢打赌，这个问题已经在某个地方得到了回答，但我的回答是空的。

我正在使用 Angular 1.5.7 并希望在我的项目中将一些外部 HTML 导入组件控制器（在工具提示中使用），但我不知道该怎么做。

我在文件夹中的结构就像这样：

  • 组件.js
  • 组件模板.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 加载器？

谢谢

4

1 回答 1

0

回答我自己的问题。不完全是我的完美解决方案，因为我没有从导入的 HTML 中编译任何值，所以我将其分解为更小的片段来控制。

首先，我不应该为此目的在混合中使用 ngTemplate。其次，解决这个问题的方法是在加载器链前面加上一个感叹号，以覆盖 webpack 配置中的默认值。

所以，这可以为我提供我需要的字符串：

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

由于我使用字符串来填充工具提示（带有包装指令的 jQuery 提示）并且需要仅在我的组件的 $onInit 回调中可用的值，我认为我什至没有机会在它结束之前针对我的范围编译它作为输出。但在其他情况下，我确信我可以编译它并让事情按预期工作。

希望这可能对其他人有所帮助。

于 2016-07-11T23:18:55.510 回答