Angularjs 如何在angular ui引导分页指令中将上一个文本和下一个文本属性设置为HTML模板

我要用 我需要将“上一个”、“下一个”指示器设置为html

比如：

<pagination 
    previous-text="'<span class="glyphicon glyphicon-arrow-left"></span>'"
    next-text="'<span class="glyphicon glyphicon-arrow-right"></span>'"
>
</pagination>

不幸的是，它返回解析的html而不是图标

---

以下是我想要实现的目标：

这个答案基于@pkozlowski.opensource评论： 向html文件添加一个脚本标记，如下所示，然后就可以开始了：

<script id="template/pagination/pagination.html" type="text/ng-template">
<ul class="pagination">
    <li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()}">
        <a href ng-click="selectPage(1)" title="First Page"> 
            <span class="glyphicon glyphicon-fast-backward"></span>
        </a>
    </li>
    <li ng-if="directionLinks" ng-class="{disabled: noPrevious()}">
        <a href ng-click="selectPage(page - 1)" title="Previous Page">
          <span class="glyphicon glyphicon-step-backward"></span>
        </a>
    </li>
    <li ng-repeat="page in pages track by $index" ng-class="{active: page.active}">
      <a href ng-click="selectPage(page.number)">{{page.text}}</a>
    </li>
    <li ng-if="directionLinks" ng-class="{disabled: noNext()}">
      <a href ng-click="selectPage(page + 1)" title="Next Page">
        <span class="glyphicon glyphicon-step-forward"></span>
      </a>
   </li>
   <li ng-if="boundaryLinks" ng-class="{disabled: noNext()}">
     <a href ng-click="selectPage(totalPages)" title="Last Page">
       <span class="glyphicon glyphicon-fast-forward"></span>
     </a>
   </li>
</ul>

---

我修改了原始模板，用字形图标替换了分页文本，并在自定义链接中添加了标题

    $templateCache.put('template/pagination/pagination.html',
            "<ul class=\"pagination\">\n" +
            "  <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noPrevious()}\"><a href ng-click=\"selectPage(1)\"><span class=\"glyphicon glyphicon-fast-backward\"></span></a></li>\n" +
            "  <li ng-if=\"directionLinks\" ng-class=\"{disabled: noPrevious()}\"><a href ng-click=\"selectPage(page - 1)\"><span class=\"glyphicon glyphicon-triangle-left\"></span></a></li>\n" +
            "  <li ng-repeat=\"page in pages track by $index\" ng-class=\"{active: page.active}\"><a href ng-click=\"selectPage(page.number)\">{{page.text}}</a></li>\n" +
            "  <li ng-if=\"directionLinks\" ng-class=\"{disabled: noNext()}\"><a href ng-click=\"selectPage(page + 1)\"><span class=\"glyphicon glyphicon-triangle-right\"></span></a></li>\n" +
            "  <li ng-if=\"boundaryLinks\" ng-class=\"{disabled: noNext()}\"><a href ng-click=\"selectPage(totalPages)\"><span class=\"glyphicon glyphicon-fast-forward\"></span></a></li>\n" +
            "</ul>");

$templateCache.put（'template/pagination/pagination.html'，
“
\n”+
“
\n”+
“
\n”+
“
\n”+
“
\n”+
“
\n”+
“
”；

我在ng文本截断中遇到了类似的问题。问题在于，该参数被作为字符串添加到html中。所以我面临着解析问题。因此，请尝试按以下方式更正引号：

<pagination 
    previous-text="<span class='glyphicon glyphicon-arrow-left'></span>"
    next-text="<span class='glyphicon glyphicon-arrow-right'></span>"
>
</pagination>

---

我也面临同样的问题。但不同的是我用的是。您可以为每个图标找到unicode

请注意，分页现在位于标签

uib pagination

HTML文件

<uib-pagination class="my-pagination"
                ...
                first-text="&#xf049;"
                previous-text="&#xf048;"
                next-text="&#xf051;"
                last-text="&#xf050;">
</uib-pagination>

.my-pagination {
    font-family: Helvetica, FontAwesome;
}

这里使用Helvetica设置数字的字体。 结果如下

---

如果需要将其设置为HTML，可以覆盖分页模板。事实上，这可能是一个答案：）对我来说不起作用（中间的

元素模板，带有NG重复属性，适用于所有的东西，包括方向和边界链接）。这对我来说非常有用。我在我的控制器中注入$templateCache，然后使用我自己的自定义上一个和下一个图标将此块粘贴到我的控制器底部