AngularJS/UI Bootstrap - fading out alert on remove

Question

I am using Angular with UI Bootstrap. I\'ve created the custom directive that pushes broadcasted alerst into the array of alerts that are bound to the view (rendered as Boot

Answer 1

We have a similar setup; the template:

    
{{msg.msg}}

The controller is simple, containing the following function and the messages array:

function closeMsg(index) {
    $scope.messages[index].remove();
}

The animation definition (see ng-animate - we are using jQuery UI):

module.animation("enter-slide", function () {
    return {
        setup: function (element) {
            element.hide();
        },
        start: function (element, done, memo) {
            try{
                element.slideDown(function () {
                    done();
                });
            }
            catch(ex){}
        }
    };
});

module.animation("leave-slide", function () {
    return {
        start: function (element, done, memo) {
            element.slideUp(function () {
                done();
            });
        }
    };
});

Of course you substitute slideUp/Down() with the desired effect.