Serviço de alerta Angular-UI Bootstrap para Angular.js

O Angular-UI Bootstrap fornece vários controles transferidos do popular projeto Bootstrap para as diretivas do Angular (com uma redução perceptível no tamanho do código). Se você está planejando usar qualquer componente Bootstrap em seu aplicativo Angular, recomendo dar uma olhada. Dito isso, isso também deve funcionar se você estiver apenas incluindo componentes diretamente do Bootstrap.

Os serviços em Angular.js são destinados ao compartilhamento de código entre controladores. Os alertas são um dos muitos bons casos de uso para mover o código de um controlador para um serviço.

A documentação do Angular-UI Bootstrap fornece os seguintes exemplos:

Visão

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

controlador

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

Visto que vamos querer criar alertas de controladores diferentes em nosso aplicativo, e referências de código entre controladores são consideradas uma prática ruim, vamos querer mover isso para um serviço.

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

Visão

Esta marcação provavelmente estará em seu index.html ou incluída em um modelo de cabeçalho.

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

Finalmente, precisamos vincular o método closeAlert () do alertService ao $ globalScope.

Controlador

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

Não estou totalmente satisfeito com essa vinculação global e preferiria poder chamar o método de serviço diretamente do atributo close data na diretiva de alerta, mas não consigo ver como fazer isso.

Agora, criar um alerta é apenas uma questão de chamar alertService.add () de qualquer um de seus controladores.

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

Se alguém tiver alguma melhoria a oferecer, deixe um comentário. Esperançosamente, esta foi uma introdução útil aos serviços Angular.js.