The directive is part of a collection of utils available on GitHub and can be installed from bower or npm, whichever suits your project best.
The directive replaces the use of
ng-repeat for the page content, and includes a new directive to represent a set of page navigation buttons.
The control is designed for use in Bootstrap, which will be fine for the common case, but can be modified to use a custom template making it
very flexible - nice work Michael!
I’m a big fan of Semantic UI, and love how simple it is to style my AngularJS sites. Once I noticed the styles were broken, I started digging. The solution is quick and simple, and involves creating a custom template for the page navigation directive to use Semantic UI. I’ve based this off the pagination example in the tables documentation.
Copy this template and save it in your project next to your other templates/views/partials as
Reference the Template
To use the template, reference it in the pagination control directive as follows.
Once you’re done, your pagination controls should look like this, and function in exactly the same way as the vanilla Bootstrap version. If there are updates to the directive, you may have to fix some things, but I’ll try keep this up to date if anything does change.
The original repository includes a demo of the directive on Plunker which I’ve forked and updated with this template. Take a look at the demo to see it in action!