Home > Web Front-end > JS Tutorial > body text

How to implement alerts using Angular-UI Bootstrap components

不言
Release: 2018-07-13 09:57:07
Original
1831 people have browsed it

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>
Copy after login

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);
  };
}
Copy after login

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

&#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;
  });
Copy after login

view

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

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 = [&#39;$scope&#39;, &#39;$location&#39;, &#39;alertService&#39;];
Copy after login

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!");
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!