Maison > interface Web > js tutoriel > le corps du texte

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

不言
Libérer: 2018-07-13 09:57:07
original
1851 Les gens l'ont consulté

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>
Copier après la connexion

controller

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

É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

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

view

<div>
  <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{ alert.msg }}</alert>
</div>
Copier après la connexion

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 = [&#39;$scope&#39;, &#39;$location&#39;, &#39;alertService&#39;];
Copier après la connexion

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!");
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal