Building Your Own Directives
By putting the functionality in the compile function, it is only called once, and the
button is simply cloned by the ng-repeat directive. If you are doing complex work
on the DOM then this optimization can make a significant difference, especially if
you are iterating over a large collection.
Understanding AngularJS widget directives
One of the most powerful features of directives is to be able to create your own
domain-specific tags. In other words, you can create custom elements and attributes
that give new meaning and behavior to the mark-up in your HTML that is specific to
the domain for which you are building the application.
For example, similar to standard HTML tags, you could create a
displaying user information or a
Google map. The possibilities are endless and the benefit is that your mark-up
matches the domain in which you are developing.
Writing a pagination directive
In our SCRUM app, we often have large lists of tasks or backlog items that are
unwieldy to display on the screen in one go. We use pagination to break up the
lists into manageable pages of items. It is common to have a pagination control
block on our screen that links to the pages in the list.
The Bootstrap CSS framework provides a clean design for styling such a widget.
We will implement this pagination block as a reusable widget directive that we
use in our mark-up without having to think about the detail of how it works. The
mark-up will look like this:
<pagination num-pages="tasks.pageCount"
current-page="tasks.currentPage">
</pagination>