Question

我正在尝试使用字体真棒图标替换AngularUI Bootstrap指令中的下一个和上一个文本，但它被解析为文本而不是HTML

<pager previous-text='<i class="fa fa-angle-left"></i>' total-items="totalItems" ng-model="currentPage"></pager>

我该如何做到这一点？

Answer 1

默认情况下，Angular不会将任何内容信任为html，因此您需要将其告知trustAsHtml(yourString)

trustAsHtml()是Strict Contextual Escaping（$ sce）服务的一种方法。

所以在你的指令中，这只是伪的，因为我没有看到你的指令，你需要做这样的事情：

app.directive('pager', ['$sce', function($sce){
    return{
      restrict:'E',
      link: function(scope, element, attrs){
           var previousTextHtml = $sce.trustAsHtml(attrs.previousText);
           // previousTextHtml will now be html
      }
   }
}]);

此外，也许更好的方法是在你的指令上设置一个类。

所以不要在你的html属性中推送previous-text，只需按下你想要设置的类，然后在你的模板中设置任何内容（假设你有一个），只需设置类{ <i>

中的班级previous-text

Angular UI Bootstrap Pager - 如何设置图标而不是文本？

1 个答案: