So implementieren Sie Warnungen mithilfe von Angular-UI-Bootstrap-Komponenten

In diesem Artikel wird hauptsächlich die Verwendung der Angular-UI-Bootstrap-Komponente zum Implementieren von Warnungen vorgestellt. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf zurückgreifen Es werden viele Komponenten bereitgestellt, die von beliebten Bootstrap-Projekten auf Angular-Direktiven portiert wurden (was die Codemenge erheblich reduziert). Wenn Sie planen, Bootstrap-Komponenten in einer Angular-Anwendung zu verwenden, empfehle ich, dies sorgfältig zu prüfen. Allerdings sollte auch die direkte Verwendung von Bootstrap funktionieren.

Angular Controller kann Servicecode teilen. Warnungen sind einer der guten Anwendungsfälle für die Weitergabe von Servicecode an den Controller.

Die Angular-UI-Bootstrap-Dokumentation enthält das folgende Beispiel:

Ansicht

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

Angenommen, wir möchten verschiedene Controller in der App. Der Alarm in erstellt wurde und der Controller-übergreifende Code nicht einfach zu referenzieren ist, werden wir ihn in den Dienst verschieben.

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>

Zuletzt müssen wir die Methode closeAlert() in den AlertServices an $globalScope binden.

Controller

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

Ich bin mit dieser globalen Bindung nicht ganz einverstanden. Ich weiß es nicht warum es nicht so umgesetzt wird.

Um jetzt eine Warnung zu erstellen, rufen Sie einfach die Methode „alertService.add()“ von einem Ihrer Controller aus auf.

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Detaillierte Beispiele für die Verwendung von Keep-Alive-Komponenten der integrierten Komponenten von vue.js

Extrahiert aus Angular5-Beispielcode der öffentlichen Komponente radio list_AngularJS

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Warnungen mithilfe von Angular-UI-Bootstrap-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!