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:

animationstringam-fadeApplies a CSS animation.
backdropAnimationstringam-fadeApplies a CSS animation to backdrop.
placementstring‘top’Positions the modal—top/bottom/center.
titlestringDefault title value.
contentstringDefault content value.
htmlbooleanfalseReplace ng-bind with ng-bind-html.
backdropboolean or ‘static’trueIncludes a modal-backdrop element. Use static for a backdrop that doesn’t close the modal on click.
keyboardbooleantrueCloses the modal when escape key is pressed.
containerstring/falsefalseAppends the modal to a specific element. Example, container: 'body'.
templatepathfalseIf provided, overrides the default template.
contentTemplatepathfalseIf provided, fetches the partial and includes it as the inner content.