如何解析Angular.JS中的變量的HTML內容？

Question

我是Angular.JS的新手&目前正在開展我的第一個項目。我有一整頁的那種

<h1>Title</h1> 
 
<p>Teaser</p> 
 
<p>(a link)</p>

的傳情 可以包括HTML格式化或類似的 &元素的條目。我想要做的是「解析」這個Teaser，以便瀏覽器（目前Google Chrome）能夠正確「理解」格式。

對於詳細頁面，一個id被傳遞給shownews，但是第一個呼叫沒有一個id來讀取所有來自哪裏的消息，用戶可以通過每個新聞鏈接到達詳細頁面。在這裏，我已經遇到了同樣的問題。下面，你看到Angular.JS代碼爲兩個主要的新聞頁面和詳細信息頁面，在那裏我可以通過使用ng-bind-html指令如下解決的詳細信息頁面的問題：

\t $scope.shownews = function(id) { 
 

 
\t if (typeof id === 'undefined') { 
 
\t  $http({ 
 
\t  method: 'GET', 
 
\t  url: 'http://dev.ivm.at/getallnews.php' 
 
\t  }). 
 
\t  success(function(data, status, headers, config) { 
 
\t   $scope.allnews = data; 
 
\t   $scope.myHTML = []; 
 

 
\t   for (var i = 0; i < $scope.allnews.length; i++) { 
 
\t   $scope.myHTML[i] = $scope.allnews[i].Teaser; 
 
\t   } 
 
\t  }); 
 
\t } else { 
 
\t  $http({ 
 
\t  method: 'GET', 
 
\t  url: 'http://dev.ivm.at/getnews.php?ID=' + id 
 
\t  }). 
 
\t  success(function(data, status, headers, config) { 
 
\t   $scope.singlenews = data; 
 
\t   $scope.Newstitel = $scope.singlenews[0].Title 
 
      //[...] 
 
\t   $scope.Inhalt = $scope.singlenews[0].Inhalt; 
 
\t   //[...] 
 
\t   $scope.myHTML = "<h1>" + $scope.Newstitel + "</h1><br>" + $scope.Inhalt; 
 
\t  }); 
 
\t } 
 
\t }

<div data-role="page" id="allnews"> 
 
    <div id="sub"> 
 
    <section class="blog"> 
 
     <article ng-bind-html="myHTML" ng-repeat="news in allnews"> 
 
     <h1>{{news.Title}}</h1> 
 
     <p>{{myHTML[$index]}}</p> 
 
     <p class="readmore"> 
 
      <a href="onenews" ng-click="shownews(news.ID)"> 
 
        Weiterlesen: {{news.Title}} 
 
      </a> 
 
      <span class="readmore_icon"></span> 
 
     </p> 
 
     </article> 
 
    </section> 
 
    </div> 
 
</div>

我的問題是如何正確使用ng-bind-html命令，以便在它是一組文本的情況下解析$scope.myHTML。

謝謝你的回答！

Answer 1

要做到這一點，您需要使用$sce angularjs內置服務來解析之前保護HTML內容。

例

HTML瀏覽：

<span ng-bind-html="toTrustedHTML(html)"> 

控制器：

angular.module('myModule').controller('myController', function($scope, $sce){ 
    $scope.toTrustedHTML = function (html) { 
    return $sce.trustAsHtml(html); 
    }; 
}); 

UPDATE：

您可能需要使用ngSantize和還請檢查以下URL其中包含一個解鎖程序，說明您需要$sce.trustAsHtml()方法。