How to implement alerts using Angular-UI Bootstrap components

This article mainly introduces how to use the Angular-UI Bootstrap component to implement alerts. It has certain reference value. Now I share it with you. Friends in need can refer to it

Angular-UI Bootstrap Many components are provided, ported from popular Bootstrap projects to Angular directives (significantly reducing the amount of code). If you plan to use Bootstrap components in an Angular application, I recommend checking carefully. Having said that, using Bootstrap directly should also work.

Angular controller can share service code. Alerts are one of the good use cases for sharing service code to the controller.

Angular-UI Bootstrap documentation provides the following example:

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

Given that we want different controllers in the app The alarm is created in , and the code across controllers is not easy to reference, we are going to move it to the 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>

Finally, we need to bind the closeAlert() method in alertService’s to $globalScope.

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

I don’t completely agree with this global binding. What I hope is to call the service method directly from the close data attribute in the alert instruction. I don’t know why it is not implemented this way. .

To create an alert now just call the alertService.add() method from any of your controllers.

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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Example detailed explanation of the use of keep-alive components of vue.js built-in components

##Extracted from Angular5 Example code of public component radio list_AngularJS

The above is the detailed content of How to implement alerts using Angular-UI Bootstrap components. For more information, please follow other related articles on the PHP Chinese website!