綁定內的角度綁定

Question

我正在重構一些用Angular.js編寫的代碼，主要是爲了防止在一切加載時渲染大括號。原代碼如下所示：

<p class="summary">{{ feature.articleSummary }}<a ng-href="/feature/reader/?articleId={{feature.articleId}}" class="summary">...(more)</a></p> 

然後嘗試重構來：

<p class="summary" ng-bind="feature.articleSummary"><a ng-href="/feature/reader/?articleId={{feature.articleId}}" class="summary">...(more)</a></p> 

然而，這失去了嵌入式<a>元素。有沒有可能在綁定中綁定一個元素？或者，創建一個處理新模板的指令會更好嗎？或者有更好的方法來處理這個問題？

Answer 1

你應該先使用ng-bind-html而不是簡單ng-bind，然後你應該創建一個過濾器，以便消毒HTML：

yourApp.filter("sanitize", ['$sce', function($sce) { 
    return function(htmlCode){ 
     return $sce.trustAsHtml(htmlCode); 
    } 
}]); 

使你的代碼是這樣的：

<p class="summary" ng-bind-html="feature.articleSummary | sanitize">...</p>