68

这是我的模板：

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

这是我的视图模板：

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

{{stuff.content}}

我得到了contentas html，我想在视图中显示它，但我得到的只是原始 html 代码。如何呈现该 HTML？

4

5 回答 5

100

利用-

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

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

于 2013-04-02T01:14:53.873 回答
50

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

在我的应用程序中：

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>
于 2014-08-26T07:31:55.107 回答
4

在 Angular 4+ 中，我们可以使用innerHTMLproperty 而不是ng-bind-html.

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

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

in.ts 文件

let htmlContent = 'This is the `<b>Bold</b>` text.';
于 2018-05-18T09:05:32.020 回答
3

您应该遵循 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);
            })
      }
    }
});
于 2013-11-23T14:42:25.207 回答
2

所以也许你想在你的 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 方式

于 2013-10-06T10:34:51.797 回答