Angularjs 通过ng include呈现字符串模板

我试图呈现一段html，在动态路由上可用，该路由通过

$http.get（）

调用获取，它返回一段html

仅举一个例子，我尝试加载此html部分：

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

{{pagetitle}
这是一个简单的页面示例

为了模拟这个问题，我做了一个小动作，但为了简单起见，我没有调用http，只是在作用域上的字符串中添加了html

控制器是：

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

函数Ctrl（$scope）{
$scope.data={
视图：“Whaaaa”
}; 
}

html页面如下所示：

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

问题在于，它没有将字符串添加到html文件（ng include）中，而是对由该字符串组成的url进行http调用

那么，仅仅在include中输入一个字符串是不可能的吗？如果没有，那么对动态url进行http调用并在页面中输入返回的url的正确方法是什么

你可以用它玩。

你不能用它玩；参考：

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

像这样直接使用：

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

创建一个绑定，该绑定将返回计算 表达式转换为当前元素。内部HTML内容将不会被删除 消毒！只有在ngBindHtml出现时，才应使用此指令 指令的限制性太强，而且您完全信任源 您要绑定到的内容的

---

您可以使用

ng bind html unsafe

如果您不信任来自ajax请求的html，还可以使用需要服务工作的html（）

当然，将应用程序添加到ng应用程序：

<div ng-app="app">

需要指向外部HTML片段的URL，而不是HTML字符串

你想要：

---

.

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

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'"

---

ng-bind-html-unsafe可以工作，但它只在打印html时有用，而不是需要使用ng-bind编译的html以及不在其中的内容。然而，我通过使用@quinnirill中的templatecache示例解决了这个问题，因为这是一个非常干净的解决方案，不需要额外编译html。还是要感谢你的创意检查你的键盘<代码>换档

特定于键。它周围可能有一些缺陷。大多数句子的开头都是小写字母，而大写字母应该是大写字母。必须有人编辑你的问题和答案，并解决这个问题。这毕竟是一项相当无聊的任务。也许你可以为自己购买一个全新的键盘，带有功能齐全的

Shift

键，作为你自己的圣诞礼物？这正是我想要的，我通过AMD提取了部分模板，然后控制器可以将它们组装到$templateCache中，并使用ng include=“'myTpl”进行奇妙的工作。要延迟加载，我只需在include上包含一个

ng if

，并在填充模板后将变量设置为true。

ng bind html unsafe

不推荐使用。有关更多详细信息和备选方案，请参阅。

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

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