uib-paginator - 一次性绑定

Question

简介

现在我在 Angular 1.6 应用程序中使用 uib-paginator。我希望能够在应用程序启动后更改某些绑定。例如。在这种情况下，我想随时更改语言。

看起来有些 uib-paginator 指令绑定使用一次性绑定。所以我只能影响他们一次。

用法

<ul uib-pagination total-items="3"
    ng-model="currentPage"
    class="Pagination"
    boundary-links="true"
    num-pages="numPages"
    items-per-page="itemsPerPage"
    first-text="{{'LABEL_FIRST' | translate}}"
    next-text="{{'LABEL_NEXT' | translate}}"
    previous-text="{{'LABEL_PREV' | translate}}"
    last-text="{{'LABEL_LAST'}} | translate"></ul>

这些绑定使用一次性绑定：
- 第一篇文章
- 下一篇文章
- 上一个文本
- 最后一个文本

当我更改语言时，LABEL_* 变量的值会发生变化。但显然它不会影响分页器。

想法

我可能会编写 jQuery 代码来在任何这些 LABEL_* 变量发生变化时刷新该特定元素。但我想尽可能地让 jQuery 远离这个应用程序。

如果您对我如何解决这个问题有任何想法（没有 jQuery..:) 请分享。

Answer 1

以下是为遇到相同问题的任何人提供的解决方案：

1.
这是 uib-paginator 模板：
https://github.com/angular-ui/bootstrap/blob/master/template/pagination/pagination.html

将其复制到 .html 文件。

2.
全部修改

{{::getText('x')}} to {{getText('x')}}

或者用你自己的翻译替换它（就像我一样）

{{::getText('first')}} to {{'LABEL_FIRST'|translate}}

3.
在 uib-pagination 中使用属性 template-url 并引用新模板。

我上面的代码的新示例如下所示：

<ul uib-pagination total-items="3"
ng-model="currentPage"
class="Pagination"
boundary-links="true"
num-pages="numPages"
items-per-page="itemsPerPage"
template-url="../templates/myNewPaginatorTemplate.html"></ul>

瞧。

uib-paginator - 一次性绑定

Uib-paginator - one-time binding

angularjs

angular-ui-bootstrap

angular-translate