单击关闭按钮后，启动警报不会关闭

Question

I am trying to use a bootstrap alert to show a warning. The alert fades and dismisses after some time but i would also like to give the user an option of closing it himself. I have added jquery and js/bootstrap.min.js in that order as has been suggested in answers to similar questions.

This is my html code:

<div class="alert alert-warning alert-dismissible errormessage" role="alert"
style="display: none;">
    <button type="button" class="close" data-dismiss="alert"
    ng-click="dismissError()">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">Close</span>
    </button>
    {{ errormessage }}
</div>

And this is my js:

//sets errormessage to be displayed
function displayError(error) {
    if(error){
            $scope.errormessage = error;
            $('.errormessage').fadeIn(300).delay(5000).fadeOut(500);
    }

$scope.dismissError = function() {
    $scope.errormessage = '';
    $('.errormessage').hide();
};

CSS:

.errormessage{
    position: fixed;
    top: 1%;
    left: 50%;
    margin-left: -250px;
    width: 500px;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 9999;
    text-align: center;
}

The implicit close didn't seem to be working, so i also tried the dismissError function to do it myself but on debugging i found that code flow never enters my function.

NOTE: I have already tried doing

<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">&times;
</button>

and

<button type="button" class="close" data-dismiss="alert"
onclick="$('.alert').hide()" aria-hidden="true">&times;
</button>

both of which had no effect. Also I tried making the z-index to 2 but still cannot close the alert. Thanks for all the help!

PS: I am using this in a chromeapp that I am developing

Answer 1

Since you are using AngularJs with Bootstrap, why not use Angular UI for Bootstrap ?

You can add a ui-bootstrap-min.js file to your scripts and add a controller for the alert as below. The HTML will be:

<div class="alert alert-warning alert-dismissible errormessage" role="alert" style="display: none;" ng-controller="AlertCtrl">  
         <alert type="{{alert.type}}" close="closeAlert()">{{ errormessage }}</alert>  
</div>

The javascript will be:

angular.module('ui.bootstrap.demo').controller('AlertCtrl', function ($scope) {  
    $scope.alert = [  
        { type: 'danger', errormessage: 'Your own error message' }, 
    ];  

    $scope.closeAlert = function(index) {
        $scope.alerts.splice(index, 1);
    };
 });

This is not a great Javascript function, but you should be able to build on it to get the solution.