javascript - Angularjs 在模板中导入 html

Question

我是 angular.js 的新手，我的任务是将 html 输出到模板中，我环顾四周，发现了一个引用 $scope 和 $sanitize 并使用 ng-bind-html 指令来完成这项工作，没有一个这对我有用。

我想知道最好的方法是什么。

我的数据目前来自一个 JSON 文件，其内容字段包含 html:

例如:

{
    "title:"thisTitle",
    "content":"`<h1>Hello world</h1>`"
}

我的 Controller 非常简单，我通过 $http.get 获取资源

$http.get('/data/posts.json').success(function(data) {
    blog.posts = data;
});

我的模板也很简单，为简洁起见，这是类似的。

<div ng-app="blog">
    <div ng-controller="BlogController as blog">
        <div>
            <h1>{{blog.post[0].title}}</h1>
            <div>{{blog.post[0].content}}</div>
        </div>
    </div>
</div>

显然这都是伪代码，但我的代码非常接近。

我正在寻找的是如何以简单的方式将 html 实现到模板中的明确答案。

这个方法我试过了 https://docs.angularjs.org/api/ng/directive/ngBindHtml除其他外，有什么方法适合我吗？

干杯，感谢您的帮助。

编辑

下面的例子是真实的代码

主模板

 <section id="content" ng-app="blog">
     <div ng-controller="BlogController as blog" id="blog" class="origin">
         <div class="pop">
             <div class="blog-listings">
                 <div class="post-section">
                     <p class="title">Featured posts</p>
                     <ul>
                         <post-listing ng-repeat="post in blog.posts | featuredPost"></post-listing>
                     </ul>
                 </div>

                 <div class="post-section">
                     <p class="title">Previous posts</p>
                     <ul>
                         <post-listing ng-repeat="post in blog.posts | previousPost"></post-listing>
                     </ul>
                 </div>
             </div>

             <post-item ng-repeat="post in blog.posts"></post-item>

         </div>
     </div>
 </section>

博客项目模板

<div ng-show="blog.isSelected($index)" class="blog-page-post">
    <div class="individualBlogPost">
        <h2>{{ post.title }}</h2>
        <div class="blogAvatar"></div>
        <p class="postDetails">
            <span class="name">{{ post.author }}</span><br>{{ post.date * 1000 | date:'EEEE MMM d y' }}
        </p>
        <div ng-bind-html="post.content" class="blogPostContent">
        </div>
        <img alt="" src="/img/blog/brush-line-784x7.png" class="brushStroke " />
    </div>
    <div class="blog-buttons">
        <a href="./blog-validation-full.html" class="blog-back">View all blog posts</a>
    </div>
</div>

博客 Controller

 (function() {

     var app = angular.module('blog', ['post-filters']);

    app.controller('BlogController', ['$scope', '$http', function($scope, $http) {
         var blog = this;

         this.posts = [];
         this.tab = 0;

         $http.get('/data/posts.json').success(function(data, status) {
             var first_featured = _.first(feHelpers.checkFeatured(data, true));

             blog.posts = data;
             this.tab = first_featured.id;
         });

         this.selectTab = function(setTab) {

             this.tab = setTab;
         }

         this.isSelected = function(checkTab) {
             return this.tab === checkTab;
         }
     } ]);

     app.directive('postListing', function() {
         return {
             restrict: 'E',
             templateUrl: 'ng-blog-listing.html'
         };
     });

     app.directive('postItem', function() {
         return {
             restrict: 'E',
             templateUrl: 'ng-blog-post-item.html'
         };
     });


 })();

JSON 资源

[
    {
        "id":0,
        "title":"post title 1",
        "date":"1425254400",
        "author":"use name a",
        "thumbnail":"/img/blog/blog-listing/blog-thumb-validation.png",
        "published":true,
        "featured":true,
        "content":"<h1>this is html</h1>"
    },
    {
        "id":1,
        "title":"post title 2",
        "date":"1421712000",
        "author":"user name b",
        "thumbnail":"/img/blog/blog-listing/blog-thumb-thumb.png",
        "published":true,
        "featured":true,
        "content":"<h1>this is html</h1>"
    }
]

如果我遗漏了什么，请告诉我。

Answer 1

答案是 $sce，不知道为什么，但我在这里找到了一个帖子:AngularJS : Insert HTML into view谈论类似的问题，如果您将 $sce 作为依赖项包含在内，则可以使用 trustAsHtml 方法重新分配 html，它将允许它出现在模板中。

$http.get('/data/posts.json').success(function(data, status) {
        var first_featured = _.first(feHelpers.checkFeatured(data, true));

        var newData = [];
        _.each(data, function(post){
            post.content = $sce.trustAsHtml(post.content);
            newData.push(post);
        });

        blog.posts = newData;
        this.tab = first_featured.id;
    });

编辑:

我一直在深入研究这个问题，发现这篇博文有助于解释这个问题:

http://odetocode.com/blogs/scott/archive/2014/09/10/a-journey-with-trusted-html-in-angularjs.aspx