AngularUI Bootstrap Pager - 如何设置图标而不是文本？答案

【问题标题】：AngularUI Bootstrap Pager - How to set an icon instead of text?AngularUI Bootstrap Pager - 如何设置图标而不是文本？
【发布时间】：2014-08-07 16:23:54
【问题描述】：

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

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

我怎样才能做到这一点？

【问题讨论】：

你能发布你的指令代码吗-

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案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
      }
   }
}]);

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

所以不要在previous-text 属性中推送html，只需推送您要设置的类，然后在您的模板中包含任何内容（假设您有一个）只需设置<i> 的类到previous-text的班级

【讨论】：