Question

我正在尝试渲染一段html，在动态路线上可用，路线是通过$http.get()调用获取的，它会返回一段html，

举一个例子，我尝试加载这个html partial：

<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调用。

那么是不是只能在include中输入一个字符串？如果没有，对动态网址进行http调用的正确方法是什么，并将返回的网址输入到网页中。

您可以在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 =＆＃34;＆＃39; myPartialTemplate.html＆＃39;＆＃34;

直接使用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>

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

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

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

<div ng-app="app">

Answer 4

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

您想要ng-bind-html-unsafe：

Updated demo

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

4 个答案: