AngularJS Bootstrap警报解除超时属性不起作用

Question

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

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

但它确实在NG-重复例如从现场工作：

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

该问题是缺少亲密的属性？如果是这样，那么如何为不属于数组的一部分的警报写一个关闭函数？

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

Answer 2

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

在View：（在角UI引导更新）

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

Answer 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'); 

Answer 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服务注入控制器的顶端。

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