Comment implémenter des alertes à l'aide des composants Angular-UI Bootstrap

Cet article présente principalement comment utiliser le composant Angular-UI Bootstrap pour implémenter des alertes. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Angular-UI Bootstrap. De nombreux composants sont fournis, portés des projets Bootstrap populaires vers les directives Angular (réduisant considérablement la quantité de code). Si vous envisagez d'utiliser des composants Bootstrap dans une application Angular, je vous recommande de vérifier attentivement. Cela dit, utiliser directement Bootstrap devrait également fonctionner.

Le contrôleur angulaire peut partager le code de service. Les alertes sont l'un des bons cas d'utilisation pour partager le code de service avec le contrôleur.

La documentation Angular-UI Bootstrap fournit l'exemple suivant :

view

<div ng-controller="AlertDemoCtrl">
  <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
  <button class=&#39;btn&#39; ng-click="addAlert()">Add Alert</button>
</div>

controller

function AlertDemoCtrl($scope) {
  $scope.alerts = [
    { type: 'error', msg: 'Oh snap! Change a few things up and try submitting again.' }, 
    { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
  ];
  $scope.addAlert = function() {
    $scope.alerts.push({msg: "Another alert!"});
  };
  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };
}

Étant donné que nous souhaitons utiliser les alertes sont créés dans différents contrôleurs et le code entre les contrôleurs n'est pas facile à référencer. Nous le déplacerons vers le service.

alertService

'use strict';
/* services.js */
// don't forget to declare this service module as a dependency in your main app constructor!
var appServices = angular.module('appApp.services', []);
appServices.factory('alertService', function($rootScope) {
    var alertService = {};
    // create an array of alerts available globally
    $rootScope.alerts = [];
    alertService.add = function(type, msg) {
      $rootScope.alerts.push({'type': type, 'msg': msg});
    };
    alertService.closeAlert = function(index) {
      $rootScope.alerts.splice(index, 1);
    };
    return alertService;
  });

view

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

Enfin, nous devons lier la méthode closeAlert() dans alertService à $globalScope.

contrôleur

function RootCtrl($rootScope, $location, alertService) {
  $rootScope.changeView = function(view) {
    $location.path(view);
  }
  // root binding for alertService
  $rootScope.closeAlert = alertService.closeAlert; 
}
RootCtrl.$inject = ['$scope', '$location', 'alertService'];

Je ne suis pas entièrement d'accord avec cette liaison globale. Ce que je veux, c'est appeler la méthode de service directement à partir de l'attribut close data dans la directive alert. Je ne sais pas pourquoi pas.

Pour créer une alerte maintenant, appelez simplement la méthode alertService.add() depuis l'un de vos contrôleurs.

function ArbitraryCtrl($scope, alertService) {
  alertService.add("warning", "This is a warning.");
  alertService.add("error", "This is an error!");
}

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Exemples détaillés de l'utilisation des composants keep-alive des composants intégrés de vue.js

Extrait d'Angular5 Exemple de code de la radio du composant public list_AngularJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!