通过ng-include渲染字符串模板

Question

我正在尝试呈现一段HTML代码，该代码位于一个动态路由上，使用$http.get()调用获取该路由，它返回一段HTML代码。

举个例子，我尝试加载这个HTML片段：

<h1>{{ pagetitle }}</h1>
this is a simple page example

我制作了一个小小的小提琴来嘲笑这个问题，但是为了简单起见，我省略了http调用，并只在作用域中添加了html字符串。

控制器如下：

function Ctrl($scope) {
    $scope.data = {
        view: "<h1>whaaaaa</h1>"        
    }; 
}

这个页面的 HTML 代码是这样的：

<div ng-app="">
  <div ng-controller="Ctrl">
    <div ng-include src="data.view"></div>
  </div>
</div>

问题是它没有将字符串添加到HTML文件（ng-include）中，而是似乎会对该字符串生成一个URL进行HTTP调用。

因此，是否不可能只是将字符串输入到包含中？如果不行，那么正确的方法是什么，以便对动态URL进行HTTP调用，并将返回的URL输入到页面中。

您可以在JSFiddle中尝试一下。

- Sander

---

请检查您的键盘，尤其是 Shift 键。它可能存在一些故障。您大多数句子都是以小写字母开头，而您应该使用大写字母。有人需要编辑您的问题和答案，并进行修正。这实在是一个相当乏味的任务。也许您可以给自己买一份全新的键盘作为圣诞礼物？这样您就可以拥有一个完全正常工作的 Shift 键了。 - trejder

Answer 1

您可以向模板缓存添加静态挂钩，因此假设您有一个获取模板的服务：

myApp.service('myTemplateService', ['$http', '$templateCache', function ($templateCache) {
  $http(/* ... */).then(function (result) {
    $templateCache.put('my-dynamic-template', result);
  });

  /* ... */
}]);

然后，你可以这样做：

<div include src=" 'my-dynamic-template' "></div>

注意：引用名称必须用单引号括起来，这常常让我头疼…注意：

请注意，在Angular尝试解析URL之前，您必须将其分配给模板缓存。

编辑：

如果动态URL逻辑足够简单，您也可以在ng-include中使用条件语句，例如：

<div ng-include="isTrue() && 'template1.html' || 'template2.html'"

- quinnirill

---

这正是我想要的，我通过 AMD 引入我的部分模板，然后控制器可以将它们组装到 $templateCache 中，并使用 ng-include="'myTpl"。 - httpete

太棒了，这是一个很好的解决方案。为了实现懒加载，我只需在包含文件中加入 ng-if，并在填充模板后将变量设置为 true。 - Bryant James

Answer 2

您不能使用ng-include实现此功能；参考：

ngInclude|src – {string} – 表达式计算为 URL 的 Angular 表达式。如果源代码是一个字符串常量，请确保将其用引号括起来，例如：src="'myPartialTemplate.html'"。

可以直接使用ng-bind-html-unsafe实现此功能：

<div ng-bind-html-unsafe="data.view"></div>

演示

创建一个绑定，将计算表达式的结果innerHTML到当前元素中。innerHTML的内容不会被清理！您应该仅在ngBindHtml指令过于严格并且绑定内容的来源是绝对可信时才使用此指令。

- EpokK

---

ng-bind-html-unsafe已被弃用。请参阅https://dev59.com/HGIk5IYBdhLWcg3wTcYr获取更多详细信息和替代方案。 - The DIMM Reaper

Answer 3

你可以使用ng-bind-html-unsafe

如果你不信任来自ajax请求的html，你也可以使用ng-bind-html，它需要使用$sanitize服务才能工作(示例)。

<div ng-bind-html="data.view"></div>

要使用这个功能，需要包含额外的JS文件。

angular.module('app', ['ngSanitize']);

当然，还需要将应用程序添加到ng-app中：

<div ng-app="app">

- Marcel Gwerder

Answer 4

ng-include期望一个外部HTML片段的URL，而不是一个HTML字符串。

您需要使用ng-bind-html-unsafe：

更新演示

- André Dion

---

ng-bind-html-unsafe可以使用，但仅在打印HTML时有用，而不是需要再次编译带有ng-bind等内容的HTML。但是，我通过使用@quinnirill的templatecache示例来解决了这个问题，因为它是一种非常干净的解决方案，无需额外编译HTML。但还是谢谢您提供的想法。 - Sander