AngularJS Bootstrap警告框的dismiss-on-timeout属性无法正常工作

Question

我正在尝试使用AngularJS Bootstrap警报，就像这里所解释的那样，使用“dismiss-on-timeout”属性。 但在这个例子中，它没有效果，警报只是常规出现并且不会消失。

<alert type="warning" dismiss-on-timeout="2000">Alert text</alert>

然而，在来自该网站的 ng-repeat 示例中，它确实起作用：

<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" dismiss-on-timeout="2000">{{alert.msg}}</alert>

问题是缺少闭合属性吗？如果是这样，那么如何为不属于数组的警报编写关闭函数？

- Klausette

---

运行正常：http://plnkr.co/edit/0ovNkuePOra371EUzMge?p=preview - dfsq

是的，正如我所说的，当在警报数组上使用ng-repeat时没有问题。但我正在寻找一个单独的警报，如果您复制第一段代码，则无法使用它。 - Klausette

Answer 1

它能正常工作，只是dismissOnTimeout指令会调用警告指令控制器的close方法。该控制器又使用外部范围的close方法。因此您需要实现它，以便指令可以调用它：

<alert type="danger" close="closeAlert()" ng-if="show" 
       dismiss-on-timeout="2000">Something happened.</alert>

并在控制器中：

$scope.show = true;

$scope.closeAlert = function(index) {
    $scope.show = false;
};

- dfsq

---

谢谢！我怀疑这与close方法有关，但不确定如何实现它。 - Klausette

"close" 方法是什么？ - Imran

@Imran https://github.com/angular-ui/bootstrap/blob/d6b9ee17e57b6f826c5d4725f39b813f7cff4c61/src/alert/alert.js#L27 - dfsq

如果有使用示例的话，那就太好了。谢谢！ - Imran

我在答案中给出了示例，你只需要实现回调函数，让Angular调用它即可。 - dfsq

@Imran 那就意味着你做错了。发表你的代码或创建一个演示，这样我才能看一下，否则很难说。 - dfsq

Answer 2

实际上，您不需要使用变量（$scope.show = false;）来隐藏警报。您只需要确保保存警报的数组一次只能有一个项目，除非您想在屏幕上显示多个/以前的警报。仅在显示警报后删除警报即可。请参见以下内容：

标记：

<uib-alert ng-repeat="alert in alerts" dismiss-on-timeout="2000" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</uib-alert>

控制器

//array to hold the alerts to be displayed on the page
$scope.alerts = [];

/**
 *This function is used to push alerts onto the alerts array.
 */
$scope.addAlert = function(type, message) {

    //add the new alert into the array of alerts to be displayed.
    $scope.alerts.push({type: type, msg: message});
};

/**
 *This function closes the alert
 */
$scope.closeAlert = function(index) {

    //remove the alert from the array to avoid showing previous alerts
    $scope.alerts.splice(0); 
};

当您想要显示警报时：

$scope.addAlert('success', 'My message');

- giddygitau

---

我也使用了你的代码，但只有超时基础警报没有隐藏。那么，我该如何处理？请建议，谢谢。 - VjyV

Answer 3

我从来没能让它正常工作。这里有一个更直接的方法：

标记：

<div uib-alert 
     data-closeable="true"   <!-- sets the 'x' on the right for closing -->
     close="closeAlert()"    <!-- what the 'x' and the timeout will call -->
     alert alert-{{ alert.level }}"   <!-- sets the color (e.g. 'success' or 'danger')  -->
     ng-show="alert.show">   <!-- only show me when this is truthy -->
     {{ alert.message }}
</div>

控制器

$scope.closeAlert = function() {
    $scope.alert.show = false;
}

$scope.showAlertForFiveSeconds = function(){
    $scope.alert.message = 'Something went wrong!');
    $scope.alert.level = 'danger';  // red
    $timeout(closeAlert, 5000);  // close the alert in 5 seconds
}

基本上我所做的就是手动设置延迟调用以关闭警报并离开。

请注意，这还需要您在控制器中注入Angular $timeout服务。

- Mike K

Answer 4

我的建议是将其封装在alertFactory中，以便可以从任何地方使用：

App.factory('alertFactory',['$rootScope', 
    function($rootScope) {
    var alertService = {};
    $rootScope.alerts = [];

    // will automatidally close
    // types are success, warning, info, danger
    alertService.addAuto = function(type, msg, delay) {
        var alert = {'type': type, 'msg': msg};
        $rootScope.alerts.push(alert);      
        if (!delay ) {
            delay = 2500; // default delay is 2500ms
        }  
        window.setTimeout(function() {
            var index = $rootScope.alerts.indexOf(alert);
            if (index > -1) {
                $rootScope.alerts.splice(index, 1);
                $rootScope.$apply(); // refresh GUI
            } 
        }, delay);
    }

    return alertService;
}])

将此内容放在您的 `index.html` 文件中，例如：

<script src="components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js"></script>
...
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>

调用方式如下

App.controller('myCtrl', [ "alertFactory", function(alertFactory) {

    var optionalDelay = 2500;
    alertFactory.addAuto('success', 'my alert text', optionalDelay);
}]);

- Boern

Answer 5

这里的解决方案是正确的，但它已经过时了，所以这是更新后的版本。

在视图中：（在 Angular UI Bootstrap 中更新）

<uib-alert type="{{alert.type}}" close="closeAlert()" dismiss-on-timeout="2000" ng-if="show">
  {{alert.msg}}
</uib-alert>

在控制器中：

$scope.show = true;

   $scope.closeAlert = function() {
     $scope.show = false;
   };

    $scope.alert = {type: 'danger', msg: 'Something gone wrong'};

- Mr H