CODEWITHSUNDEEP
angularjsangular-strap
jhamm
jhamm

Reputation: 25062

How do I add an animation in my $modalService with angular-strap?

I am creating a modal with angular-strap

When I create a modal in my markup, the animation works like expected. Here is an example:

<a href="" bs-modal="settings.deleteAccountModal" data-animation="am-fade-and-slide-top" data-template="js/donor/settings/confirm-modal.html" class="trashOut"></a>

But when I try to create the same modal with the $modalService, the animation does not work. Here is my js code:

this.openModal = function() {
        $modal({
            animation: 'am-fade-and-slide-top',
            backdropAnimation: 'am-fade',
            scope: $scope,
            title: "Are you sure?",
            backdrop: 'static',
            template: 'js/donor/settings/confirm-modal.html',
            show: true
        });
    };

How do I configure the animations with the $modalService?

Upvotes: 0

Views: 280

Answers (1)

0n1yDream
0n1yDream

Reputation: 112

As shown in https://github.com/mgcrea/angular-strap/issues/1101 , you need to add

<link rel="stylesheet" href="//rawgithub.com/mgcrea/angular-motion/master/dist/angular-motion.min.css">

on your page and inject ngAnimate at the same time. See the plnkr written by vmlf01. This is his answer, and thank him very much.

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

Upvotes: 1

Related Questions