6

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

4

4 回答 4

13

您可以将静态钩子添加到模板缓存中,假设您有一个获取模板的服务:

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'"
于 2013-08-09T14:45:51.403 回答
7

你不能用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 指令过于严格并且您绝对信任要绑定的内容的来源时,才应使用此指令。

于 2013-08-09T14:38:43.477 回答
5

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

如果您不信任来自您的 ajax 请求的 html,您还可以使用ng-bind-htmlwhich requires the $sanitizeservice to work ( DEMO )。

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

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

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

当然,将应用程序添加到 ng-app:

<div ng-app="app">
于 2013-08-09T14:39:31.253 回答
1

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

你想要ng-bind-html-unsafe

更新了演示

于 2013-08-09T14:41:09.950 回答