通过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中玩它.

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>

注意引用名称必须用单引号括起来,这总是字节我.... 注意

请注意,在角度尝试解析网址之前,您必须将其分配给模板缓存.

编辑:

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

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

Answer 2

你不能用ng-include做到这一点; 参考:

ngInclude | src - {string} - 评估为URL的角度表达式.如果source是一个字符串常量,请确保将其包装在引号中,例如src ="'myPartialTemplate.html'".

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

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

Demo

创建一个绑定,将innerHTML的结果计算为当前元素.innerHTML-ed内容将不会被清理!只有当ngBindHtml指令限制太多并且您完全信任要绑定的内容的源时,才应使用此指令.

Answer 3

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

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

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

要使用它，您需要包含一个额外的 js 文件。

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

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

<div ng-app="app">