Question

我想扩展分页指令（来自angular-bootstrap），
但无法找到如何扩展内置指令的信息。

基本上我希望paginate做它做的事情+在分页按钮旁边显示[currentPage] / [totalpage]的额外功能。

我不想在分页中创建嵌套指令，只是希望能够使用：

<pagination
        class="pagination-sm"
        boundary-links="true"

        <!-- based on attribute below i want to display 'current/total' -->
        meta-info="true"

        >
</pagination>

任何人都可以帮助或导航到帮助来源吗？

Answer 1

有一种方法可以延长＆＃34;第3方指令，而不使用$provider.decorator()

修改源代码

请参阅http://angular-tips.com/blog/2013/09/experiment-decorating-directives/

它有点长，但在工作时很满意。

Answer 2

如果您只需要重载模板（而不是指令/控制器的JS逻辑），您可以非常轻松地根据需要更新ui-bootstrap：

在模板中，只需添加：

<script id="template/pagination/pagination.html" type="text/ng-template">
  <ul class="pagination">
      ...
  </<ul>
</script>

您也可以将其放在专用文件中并使用grunt / gulp和html2js自动放入templateCache：

angular.module('myApp', ['ui.bootstrap']).run(
  ['$templateCache', function($templateCache){
    $templateCache.put('template/pagination/pagination.html', 
"<ul class=\"pagination\">\n" +
    "    ...\n" +
    "</ul>\n");
  }
]);

这将取代现有模板。当您想要添加css类名或更新标签时有用。如果你需要添加逻辑，那还不够（见其他答案）

Angular指令扩展

2 个答案: