web-dev-qa-db-fra.com

L'attribut de non-respect du délai d'attente de l'alerte AngularJS Bootstrap ne fonctionne pas

J'essaie d'utiliser les alertes AngularJS Bootstrap comme expliqué ici avec l'attribut "renvoi sur expiration". Cela n'a aucun effet dans cet exemple, l'alerte apparaît régulièrement et ne disparaît pas.

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

Cela fonctionne cependant dans l'exemple ng-repeat du site:

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

Le problème est-il l'attribut de fermeture manquant? Si oui, comment écrivez-vous une fonction de fermeture pour une alerte qui ne fait pas partie d'un tableau?

angularjstwitter-bootstraptimeoutalertangular-ui-bootstrap
9
Klausette

Cela fonctionne, c’est la directive dismissOnTimeout qui appelle la méthode close du contrôleur de directive d’alerte. Ce contrôleur utilise à son tour la méthode de la portée externe close. Donc, vous devez l'implémenter avec pour que cette directive puisse l'appeler:

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

et dans le contrôleur:

$scope.show = true;

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

En réalité, vous n'avez pas besoin d'utiliser la variable ($scope.show = false;) pour masquer les alertes. Tout ce que vous avez à faire est de vous assurer que le tableau contenant les alertes ne peut contenir qu'un seul élément à la fois, à moins que vous ne vouliez que plusieurs/précédentes alertes apparaissent à l'écran. Supprimez simplement l'alerte après l'avoir montrée. Voir ci-dessous:

Balisage 

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

Manette 

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

Alors, quand vous voulez afficher une alerte:

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

Je n'ai jamais pu le faire fonctionner. Voici une approche plus simple:

Balisage 

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

Manette 

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

Essentiellement, tout ce que je fais est de définir manuellement un appel différé pour fermer l'alerte et de partir.

Notez que pour cela, vous devez également injecter le service Angular $ timeout dans le contrôleur.

1
Mike K

Ma proposition serait de l’envelopper dans une alertFactory pouvant être utilisée de partout:

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

Placez ceci, par exemple. dans votre `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>

Appeler comme

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

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

La solution ici est correcte, mais elle est obsolète alors voici la version mise à jour. 

Dans la vue: (Mise à jour dans Angular UI Bootstrap)

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

Dans le contrôleur: 

$scope.show = true;

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

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