Question

我今天开始学习AngularJS，到目前为止我做得很好。但我遇到了一个问题，我似乎无法找到答案。我尝试做的是将格式为<p>Text</p>的html字符串Text打印出来。到目前为止，Angular将其打印为普通<p>Text</p>。

我的代码如下：

JS

var blogApp = angular.module('blogApp', []);

blogApp.controller('blogPostsCtrl', function($scope, $http) {
    $http.get('wp-json/posts').success(function(data) {
        $scope.posts = data;
        $scope.postsLoaded = 'visible-lg';
    });
});

HTML

<article id="post-{{post.ID}}" <?php post_class(); ?> itemscope itemprop="blogPost" itemtype="http://schema.org/BlogPosting" ng-repeat="post in posts" ng-class="postsLoaded">

    <h2 class="entry-title" itemprop="headline"><a title="Link do {{post.title}}" rel="bookmark" href="{{post.link}}">{{post.title}}</a></h2>

    <div class="entry-content">
        <img ng-src="{{post.featured_image.source}}">
        {{post.content}}
    </div>
    <footer class="entry-footer">
        <ul class="categories"><li ng-repeat="category in post.terms.category"><a href="{{category.link}}">{{category.name}}</a></li></ul>
    </footer>
</article>

我的问题在于{{post.content}}。我想尝试ng-bind-unsafe，但它已被删除。我也试过ng-bind-html="post.content"，但它没有用。

我正在使用Angular 1.4。

Answer 1

您正在寻找ngBindHtml。例如，对于您的内容，您可以使用此功能：

<div ng-bind-html="post.content"></div>

评估表达式并以安全的方式将生成的HTML插入到元素中。默认情况下，生成的HTML内容将使用$ sanitize服务进行清理。要使用此功能，请确保$ sanitize可用，例如，在模块的依赖项中包含ngSanitize（不在核心Angular中）。为了在模块的依赖项中使用ngSanitize，您需要包含＆＃34; angular-sanitize.js＆＃34;在你的申请中。

在ng-repeat中解析来自JSON的HTML

1 个答案: