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?

stackoverflow.com/questions/10816073/…, hope it points you in the right direction — Jax
– Jax, Commented Jun 29, 2015 at 9:43
Thats indeed what i want, but i want this logic to be managed by directive instead of controller — dahel
– dahel, Commented Jun 29, 2015 at 9:45

Icycool · Accepted Answer · 2015-06-29 09:47:48Z

2

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.

answered Jun 29, 2015 at 9:47

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jscti · Accepted Answer · 2015-06-29 09:54:49Z

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)

Collectives™ on Stack Overflow

AngularJs directive extending

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related