AngularJS Bootstrap 警报关闭超时属性不起作用

Posted 2023-02-25

【中文标题】AngularJS Bootstrap 警报关闭超时属性不起作用

【英文标题】：AngularJS Bootstrap alert dismiss-on-timeout attribute doesn't work

【发布时间】：2015-11-08 12:09:14

【问题描述】：

我正在尝试使用带有“dismiss-on-timeout”属性的 AngularJS Bootstrap 警报，如 here 所解释的。在这个例子中它没有任何作用，警报只是定期出现，不会消失。

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

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

【问题讨论】：

工作正常：plnkr.co/edit/0ovNkuePOra371EUzMge?p=preview

是的，正如我所说，在警报数组上使用 ng-repeat 时没有问题。但我正在寻找一个单一的警报，你可以看到如果你复制第一个代码位，它在那里不起作用。

【参考方案1】：

它有效，它只是dismissOnTimeout 指令调用警报指令控制器的close method。该控制器又使用外部作用域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;
;

【讨论】：

谢谢！我怀疑这是关于 close 方法，但不确定如何实现它。

什么是“关闭”方法？

@Imran github.com/angular-ui/bootstrap/blob/…

如果还有任何使用示例，那就太好了。谢谢！

我在答案中举了例子。你只需要实现被 Angular 调用的回调。

【参考方案2】：

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

在视图中：（在 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';

【参考方案3】：

实际上，您不需要使用变量 ($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');

【讨论】：

我也应用了与您的代码相同的代码，但只是关闭了超时基本警报并没有隐藏。那么，我该如何管理？请建议谢谢

【参考方案4】：

我永远无法让它工作。这是一个更直接的方法：

标记

<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 服务注入到控制器顶部。

【参考方案5】：

我的建议是将它包装在一个可以在任何地方使用的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);
]);