單擊關閉按鈕后，啟動警報不會關閉

Question

我正在嘗試使用引導警報來顯示警告。 警報消失並在一段時間后關閉，但是我也想給用戶一個關閉警報的選項。 我已經按照類似問題的答案中的建議順序添加了jquery和js / bootstrap.min.js。

這是我的html代碼：

<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>

這是我的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;
}

隱式關閉似乎沒有用，所以我也嘗試使用dismissError函數自己執行此操作，但是在調試時，我發現代碼流從未進入我的函數。

注意：我已經嘗試過

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

和

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

兩者均無效。 我也嘗試將z-index設置為2，但仍然無法關閉警報。 感謝您的所有幫助！

PS：我正在開發的chromeapp中使用它

Answer 1

由於您將AngularJs與Bootstrap一起使用，為什么不對引導程序使用Angular UI ？

您可以將ui-bootstrap-min.js文件添加到腳本中，並為警報添加控制器，如下所示。 HTML將是：

<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>

JavaScript將是：

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);
    };
 });

這不是一個很棒的Javascript函數，但是您應該能夠在此基礎上獲得解決方案。