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