O'Reilly logo

Mastering Web Application Development with AngularJS by Pawel Kozlowski, Peter Bacon Darwin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling buttons with directives

We are using Bootstrap CSS styles for our application. This CSS library specifies mark-up and CSS classes to ensure that buttons are styled correctly. For instance a button might have mark-up of the form:

<button type="submit"
        class="btn btn-primary btn-large">Click Me!</button>

Having to remember to apply these classes is error prone and time consuming. We can build a directive to make this easier and more reliable.

Writing a button directive

All the buttons in our application should be styled as a Bootstrap CSS button. Instead of having to remember to add class="btn" to every button, we can add a button directive to do this for us. The unit tests for this look like:

describe('button directive', function () { var $compile, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required