CODEWITHSUNDEEP
angularjsangularjs-directive
dahel
dahel

Reputation: 67

AngularJs directive extending

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?

Upvotes: 0

Views: 339

Answers (2)

Jscti
Jscti

Reputation: 14440

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)

Upvotes: 0

Icycool
Icycool

Reputation: 7179

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.

Upvotes: 2

Related Questions