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

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;
      };
});

如果按鈕標簽為Chicken，則應顯示“ Chicken”換行符，然后顯示“ Hello”，但僅顯示“ Chicken”
你好”。

歡迎任何幫助。

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>

柱塞說明