Using AngularStrap

Now that we’ve installed AngularStrap, let’s take a look at some of the plugins it offers and how we use them.

Before we begin, let’s quickly set up a demo environment. Let’s duplicate our index.html file and rename it demo.html. We will also change our controller to demoCtrl and add that to our controller.js file. This gives us a nice clean canvas we can play with.

The modal window

A modal window is an extremely common UI paradigm within web apps. It’s a great way to display a small amount of information without taking the user out to a new page.

The AngularStrap modal can be called on the click of a button with the bs-modal directive applied to it:

<button class="btn btn-primary" bs-modal="modal">Show Modal</button>

The value passed to it is a model on our scope. It’s a hash that contains two values: title and content. Here it is within our controller:

$scope.modal = {
    title: 'Modal Title',
    content: 'Modal content'
};

There are also a number of options that can be used with the modal directive. These are applied to our element as attributes and prepended with data-. For example, if we wanted to change the animation, we could do that with the following:

<button class="btn btn-primary" bs-modal="modal" data-animation="am-fade-and-scale">Show Modal</button>

This will now use the fade and scale animation from AngularMotion. Be sure to check out the AngularMotion website for a full list of available animations.

The following table from the AngularStrap website shows the full list of options available for the modal directive:

Name Type Default Description
animation string am-fade Applies a CSS animation.
backdropAnimation string am-fade Applies a CSS animation to backdrop.
placement string ‘top’ Positions the modal—top/bottom/center.
title string Default title value.
content string Default content value.
html boolean false Replace ng-bind with ng-bind-html.
backdrop boolean or ‘static’ true Includes a modal-backdrop element. Use static for a backdrop that doesn’t close the modal on click.
keyboard boolean true Closes the modal when escape key is pressed.
container string/false false Appends the modal to a specific element. Example, container: 'body'.
template path false If provided, overrides the default template.
contentTemplate path false If provided, fetches the partial and includes it as the inner content.

Chapter 2 of 6