AngularJs 指令扩展答案

【问题标题】：AngularJs directive extendingAngularJs 指令扩展
【发布时间】：2015-06-29 09:33:48
【问题描述】：

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

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

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

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

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

        >
</pagination>

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

【问题讨论】：

stackoverflow.com/questions/10816073/…，希望它能为您指明正确的方向
这确实是我想要的，但我希望这个逻辑由指令而不是控制器管理

标签： angularjs angularjs-directive

【解决方案1】：

有一种方法可以在不修改源代码的情况下使用$provider.decorator()“扩展”第 3 方指令

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

虽然有点长，但是用起来很满意。

【讨论】：

【解决方案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 类名或更新标签时很有用。如果您需要添加逻辑，那是不够的（请参阅其他答案）

【讨论】：