How do i make modal placement and animations work in angular-strap

Question

I have setup my project to use angular strap with bootstrap and while a button with the bs-modal attribute opens a modal without issues the data-placement and data-animation attributes are not doing anything. i tried passing the animation and placement as defaults via the directive config but that does not help either.

I have:

1. angular (with angular-animate.js), angular-strap (including angular-strap.tpl.js), bootstrap js files loaded
2. i have the angular-motion.css file loaded too
3. the modal opens at the top, without animation whatever i set for animation or placement

Am i missing more css or js requirements not in the docs?

Answer 1

Ok figured this out after some tinkering. The animation did not work because obviously you have to inject the animate js into the directive too if you want to use it:

angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap']);

This is actually mentioned on the github page but not in the docs so i missed that.

The placement not working seems to be an issue with the base bootstrap css not actually supporting the center class for modals. Maybe a bit unfortunately the docs use this as an example but this will only work if you add the css for this yourself. So to actually use:

data-placement="center"

.. you will either have to load the css from the docs here: http://mgcrea.github.io/angular-strap/styles/libraries.min.css

or just copy the part for centering modals:

.modal.center .modal-dialog {
    position:fixed;
    top:40%;
    left:50%;
    min-width:320px;
    max-width:630px;
    width:50%;
    -webkit-transform:translateX(-50%) translateY(-50%);
    transform:translateX(-50%) translateY(-50%)
}