如何使用過濾器插入換行符？

Question

這是我的HTML代碼中，我希望過濾器來執行：

<div class="col-xs-4 col-sm-15 previewBtnCont" ng-repeat="category in NavigationModel.pageArray" > 
        <button class="btn btn-lrg previewContentBtns" > 
         <div ng-bind="category.categoryDescription|filterPreviewBtnLabels"></div> 
        </button> 
</div> 

的邏輯是，如果按鈕標籤超過10個字符，然後從11日起，字符它轉到下一行。我寫的過濾器正在工作，但換行符「
」顯示爲一個字符串，而不是換行符。該過濾器的功能是：

common.filter('filterPreviewBtnLabels', function() { 
     var testString = "Hello"; 
     return function(value){ 
     if (!angular.isString(value)) { 
      return value; 
     } 
     return value + "<br>" + testString; 
     }; 
}); 

如果按鈕標籤是雞它應該顯示「雞」線斷開，然後「你好」，但它只是顯示「雞
你好」。

任何援助是最受歡迎的。

Answer 1

如果你想在文本中引入<br/>那麼你需要使用ng-bind-html指令來輸出HTML，而不是{{value}}。

假設按鈕文本的來源是可信的（即不是最初來自用戶或其他第三方來源），您需要使用$sce服務將結果值「信任」爲HTML：$sce.trustAsHtml。

下面是把<br/>，而不是空間的例子：

app.filter("break", function($sce){ 
    return function(value){ 
    if (!angular.isString(value)) return value; 
    return $sce.trustAsHtml(value.split(" ").join("<br/>")); 
    }; 
}); 

這是用法：

<button ng-bind-html="name | break"></button> 

Plunker說明