AngularJs directive extending

Question

I want to extend pagination directive (from angular-bootstrap),
but cannot find information how to extend built-in directives.

Basically i want paginate to do what it does + extra functionality of displaying [currentPage]/[totalpage] next to pagination buttons.

I don't want to create nested directive in pagination, just want be able to use:

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

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

        >
</pagination>

Can anyone help or navigate to helping source?

http://stackoverflow.com/questions/10816073/how-to-do-paging-in-angularjs, hope it points you in the right direction — Jax, Jun 29 '15 at 09:43
Thats indeed what i want, but i want this logic to be managed by directive instead of controller — dahel, Jun 29 '15 at 09:45

score 2 · Answer 1 · answered Jun 29 '15 at 09:47

There is a way to "extend" 3rd party directive without modifying the source code using $provider.decorator()

Please refer to http://angular-tips.com/blog/2013/09/experiment-decorating-directives/

It is a little long, but satisfying when getting it work.

score 0 · Answer 2 · answered Jun 29 '15 at 09:54

If you need to only overload template (and not JS logic of directives/controllers), you can very easily update ui-bootstrap to your needs :

in a template, just add :

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

You can also put that in a dedicated file and use grunt/gulp and html2js in order to automatically put in the templateCache :

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

That will replace the existing templates. Usefull when you want to add css classnames or updates labels. If you need to add logic, that's not sufficient (see other answer)

AngularJs directive extending

2 Answers2