從$ http獲取的html數據GET在Angular js中顯示不正確？

我已經定義像這樣的控制器：

app.controller("home", function ($scope, $http, $common) { 
    $http({ 
     method: "GET", 
     url: '/posts/loadData' 
    }).then(function (response) { 
     //console.clear() 
     if (typeof response.data.posts != 'undefined') { 
      console.log(response.data.posts); 
      $scope.posts = $common.arrangePosts(response.data.posts); 
     } 
    }); 
})

並安排服務數據：使用

app.service('$common', function ($timeout, $sce, $httpParamSerializerJQLike) { 
    var that = this; 
    this.arrangePosts = function (rawPosts) { 
     var posts = []; 

     $.each(rawPosts, function (key, value) { 
      posts.push({ 
          postId: value.postId, 
          postLink: '/post/' + that.cleanString(value.title) + '/' + value.postId, 
          title: value.title, 
          summary: $sce.trustAsHtml(value.summary) 
         }); 
     }); 

     return posts; 
    } 
});

值在HTML這樣的：

<div class="widget fullwidth post-single"> 
     <h4 class="widget-title">Latest</h4> 
     <div class="widget-content"> 
      <ul> 
       <li ng-repeat="post in posts"> 
        <h4 class="list-title"><a href="{{post.postLink}}">{{post.title}}</a></h4> 
        {{post.summary}} 
       </li> 
      </ul> 
     </div> 
    </div>

數據從服務器來在JSON格式：

Object { postId="4", title="asdf", summary="<p>asdf</p>"}

但是所有的html標籤都是打印在我的頁面上的，就像是一個文本一樣。

在許多SO帖子中，人們建議使用$sce.trustAsHtml，但它不適合我。無論如何請解決我的問題。

任何幫助將不勝感激.. !!

來源

2016-04-23 Ritesh

你是否在頁面中注入了帶角的東西的html？也許顯示一個html的樣子的例子？ – Yatrix

我已更新該問題，請檢查..！ – Ritesh

你試過嗎？

<div ng-bind-html='post.summary'></div>

來源

2016-04-23 15:50:57

這是工作，我已經實現了這個完整的職位查看頁面，但在這裏我不想包含不必要的元素。如果你知道我目前的結構還有其他方法，請告訴我。 – Ritesh

@Ritesh你可以使用ngTransclude：https：//docs.angularjs.org/api/ng/directive/ngTransclude – Yatrix

沒有其他解決方案可用，除了ng-bind-html。謝謝..！！我的代碼中的 – Ritesh

你可以解決這個問題了一個指令。你知道嗎，你可以在AngularJS中使用JQuery Lite來操縱DOM？

這裏一個簡單的例子：

angular.module("PostsDirective",[]) 
.directive("posts", function($sce){ 
return { 
    link: function($scope, $element, $attrs){ 
     //the HTML you want to show 
     var post = "<div>hello world</div>"; 

     var posts = [post,post,post,post]; 

     //iterating through the list (_.each is a function from underscore.js) 
     _.each(posts, function(element){ 
      //if you want to save the trusted html string in a var you can do this with getTrustedHtml 
      //see the docs 
      var safeHtml = $sce.getTrustedHtml($sce.trustAsHtml(element)); 

      //and here you can use JQuery Lite. It appends the html string to the DOM 
      //$element refers to the directive element in the DOM 
      $element.append(safeHtml); 
     }); 
    } 
}; 
});

和HTML

<posts></posts>

這也相當不錯的可讀性的HTML代碼。你可以在你的頁面的任何地方使用它。

作者：正如我所看到的，您直接從REST服務獲取HTML元素。你爲什麼不獲取數據並將其插入ng-repeat？如果你傳輸所有的HTML，如果你有大量的數據，你會得到相當高的開銷。

來源

2016-04-23 16:41:34 lufonius

正在獲取具有適當格式的文章，所以任何人都可以通過html標籤獲取這類數據。 – Ritesh

因此，您不能將服務器端的代碼更改爲JSON，因爲它是外部資源？對不起，我不知道我是否理解你的權利。 – lufonius

我已經嘗試了您的建議並拋出了此錯誤：錯誤：[$ sce：itype] http://errors.angularjs.org/1.5.0-rc.2/$sce/itype?p0=html For your第二個評論，我可以更改服務器上的代碼，但我的數據是具有適當格式的文章，這就是爲什麼我需要使用html標籤獲取數據 – Ritesh

從$ http獲取的html數據GET在Angular js中顯示不正確？

回答

相關問題