如何使用 AngularJS 模板渲染 html答案

【问题标题】：How to render html with AngularJS templates如何使用 AngularJS 模板渲染 html
【发布时间】：2013-04-02 01:12:30
【问题描述】：

这是我的模板：

<div class="span12">
  <ng:view></ng:view>
</div>

这是我的视图模板：

<h1>{{stuff.title}}</h1>

{{stuff.content}}

我将content 作为 html 获取，我想在视图中显示它，但我得到的只是原始 html 代码。如何呈现该 HTML？

【问题讨论】：

HTML 来自哪里？在不同的情况下，您需要ngBindHtmlUnsafe、ngSanitize 或自定义指令。
html 来自我的数据库
内容绝对可信吗？
例如，如果 HTML 包含 script 标签，浏览器会执行它。这种类型的“注入”攻击是破坏应用程序和窃取用户数据的常见方式。 AngularJS 有一个名为 ngSanitize 的单独模块，您可以使用它来去除任何危险标签的 HTML；它还有一个名为ngBindHtml 的指令，其工作方式与ngBindHtmlUnsafe 类似，但会为您去除危险标签。如果内容完全属于您 - 并且不是来自用户或第三方 - 那么您就不需要它。
Insert HTML into view using AngularJS的可能重复

标签： javascript angularjs

【解决方案1】：

使用-

<span ng-bind-html="myContent"></span>

你需要告诉 Angular 不要逃避它。

【讨论】：

API 在 AngularJS 1.2 中发生了变化。 stackoverflow.com/questions/18340872/…
amccausl 已经为新的 Angular 用户节省了无数小时的调试时间，因为 Angular “地狱文档”，ng-bind-html-unsafe 已被弃用，请参阅上面评论中的链接以解决答案.
我只是将插入到我的模板中，并且没有做任何其他事情，效果很好。我不必注入 $sce。这是文档：docs.angularjs.org/api/ng/directive/ngBindHtml
ngSanitize - 我在此处使用答案时缺少的一件事（您可以从 ng-bind-html 上的角度文档中获得）是您需要确保您的应用程序包含 ngSanitize 模块。没有它就行不通。
ng-bind-html 单独工作，没有使用trustAsHtml

【解决方案2】：

为此，我使用了自定义过滤器。

在我的应用中：

myApp.filter('rawHtml', ['$sce', function($sce){
  return function(val) {
    return $sce.trustAsHtml(val);
  };
}]);

那么，在视图中：

<h1>{{ stuff.title}}</h1>

<div ng-bind-html="stuff.content | rawHtml"></div>

【讨论】：

这是一个很好的解决方案@Daniel。如果我使用$sce.trustAsHtml，我不需要在应用模块中包含ngSanitize 依赖项吗？我正在使用 Angular 1.3
我们可以使用 ng-include 来实现吗？
这对我不起作用，我使用的是 angular 7。请提出解决方案。谢谢。

【解决方案3】：

在 Angular 4+ 中，我们可以使用 innerHTML 属性而不是 ng-bind-html。

就我而言，它正在工作，我正在使用 angular 5。

<div class="chart-body" [innerHTML]="htmlContent"></div>

In.ts 文件

let htmlContent = 'This is the `<b>Bold</b>` text.';

【讨论】：

【解决方案4】：

您应该遵循 Angular 文档并使用 $sce - $sce 是一项为 AngularJS 提供严格上下文转义服务的服务。这是一个文档：http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe

我们以异步加载 Eventbrite 登录按钮为例

在您的控制器中：

someAppControllers.controller('SomeCtrl', ['$scope', '$sce', 'eventbriteLogin', 
  function($scope, $sce, eventbriteLogin) {

    eventbriteLogin.fetchButton(function(data){
      $scope.buttonLogin = $sce.trustAsHtml(data);
    });
  }]);

在您看来，只需添加：

<span ng-bind-html="buttonLogin"></span>

在您的服务中：

someAppServices.factory('eventbriteLogin', function($resource){
   return {
        fetchButton: function(callback){
            Eventbrite.prototype.widget.login({'app_key': 'YOUR_API_KEY'}, function(widget_html){
                callback(widget_html);
            })
      }
    }
});

【讨论】：

【解决方案5】：

所以也许你想在你的 index.html 中有这个来加载库、脚本，并使用视图初始化应用程序：

<html>
  <body ng-app="yourApp">
    <div class="span12">
      <div ng-view=""></div>
    </div>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <script src="script.js"></script>
  </body>
</html>

那么 yourView.html 可能只是：

<div>
  <h1>{{ stuff.h1 }}</h1>
  <p>{{ stuff.content }}</p>
</div>

scripts.js 可以让你的控制器带有 $scope 的数据。

angular.module('yourApp')
    .controller('YourCtrl', function ($scope) {
      $scope.stuff = {
        'h1':'Title',
        'content':"A paragraph..."
      };
    });

最后，您必须配置路由并分配控制器以查看它的 $scope（即您的数据对象）

angular.module('yourApp', [])
.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/yourView.html',
      controller: 'YourCtrl'
    });
});

我还没有测试过，如果有错误，很抱歉，但我认为这是 Angularish 获取数据的方式

【讨论】：

如果我想要同样的行为但不依赖于 routeProvider 怎么办？
使用 ui-router 也是一样，只不过是 $stateProvider 而不是 $routeProvider 和 .state( 'yourState', { url:'/', templateUrl: 'yourView.html', controller: '你的Ctrl' });