Angular UI Bootstrap Pagination as attribute rather than custom html directive


Angular generally allows you to specify certain directives as either custom HTML tags or as attributes on a standard html tag or as classes to be included on a tag. Does angular UI Bootstrap Pagination follow these principles? If so, is there an example of specifying pagination as an attribute?

Problem courtesy of: AshtonKJ


The answer to your first question is in the source

.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
  return {
    restrict: 'EA',

where restrict: 'EA' means the directive can be used both as an element and as an attribute.

As for an example, you can just edit the examples on their demo using the "edit in plunker link"

See plnkr for an edited example with the first pagination from their demo.

Solution courtesy of: ivarni


works here

the pagination directive restricted as EA

<div pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></div>
Discussion courtesy of: Fedor Skrynnikov

This recipe can be found in it's original form on Stack Over Flow.