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

Posted 2023-03-05

【中文标题】通过 ng-include 渲染字符串模板

【英文标题】：Render string templates via ng-include

【发布时间】：2013-08-11 12:49:59

【问题描述】：

我正在尝试渲染一段 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玩它。

【问题讨论】：

检查您的键盘。 Shift 键特定。它周围可能存在一些错误。大多数句子都以小写字母开头，而应使用大写字母。必须有人编辑您的问题和答案并修复它。毕竟这是一个相当无聊的任务。也许您可以为自己购买一个带有功能齐全的Shift 键的全新键盘，作为您自己的圣诞礼物？

【参考方案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>

NOTE 参考名称必须用单引号括起来，这总是字节我.... NOTE

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

编辑：

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

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

【讨论】：

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

很棒的工作。为了延迟加载，我只需在 include 中包含 ng-if 并在填充模板后将变量设置为 true。

【参考方案2】：

ng-include 无法做到这一点；参考：

ngInclude|src – string – 评估为 URL 的角度表达式。如果 源是一个字符串常量，请确保将其括在引号中，例如 src="'myPartialTemplate.html'"。

像这样直接使用ng-bind-html-unsafe：

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

Demo

创建一个绑定，该绑定将 innerHTML 的评估结果 表达式到当前元素。 innerHTML-ed 内容不会 进行消毒！仅当 ngBindHtml 时才应使用此指令 指令过于严格，当您绝对信任来源时 您绑定到的内容。

【讨论】：

ng-bind-html-unsafe 已弃用。有关更多详细信息和替代方案，请参阅***.com/q/19415394/3123195。

【参考方案3】：

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

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

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

要使用它，您需要包含 an extra js file 。

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

当然还要将应用添加到 ng-app：

<div ng-app="app">

【参考方案4】：

ng-include 需要一个指向外部 HTML 片段的 URL，而不是 HTML 字符串。

你想要ng-bind-html-unsafe:

Updated demo.

【讨论】：

ng-bind-html-unsafe 会起作用，但它仅在打印 html 时有用，而不是再次需要使用 ng-binds 编译的 html 以及不在里面的东西。但是，我通过使用来自@quinnirill 的模板缓存示例解决了它，因为这是一个非常干净的解决方案，无需额外编译 html。仍然感谢您的想法