0

Criei um "message center" no Angularjs que injeta mensagens na tela. A mensagem sempre aparece quando acontece um erro nas operações REST ou sucesso. Isso é feito por um interceptor que verifica se na resposta tem um header de mensagem, se estiver ele injeta no provider a mensagem e o tipo, e a diretiva imprime na tela.

O problema é que a mensagem aparece no Modal, o que está certo, e aparece também na página que chamou o modal na primeira vez que abro a página nas demais vezes não aparece.

Primeira vez que salvo um usuário: inserir a descrição da imagem aqui

Segunda vez, após fechar o modal e a mensagem que apareceu na tela de listagem: inserir a descrição da imagem aqui

Interceptor (que está configurado no $httpProvider):

angular.module('app').factory('notificationInterceptor', function ($q, AlertService) {
    return {
        responseError: function(response) {
            addMessage(response);
            return $q.reject(response);
        },
        response: function(response) {
            addMessage(response);
            return response;
        }
    };

    function addMessage(response){
         var alert = response.headers('X-applicationMessage');
         if (angular.isString(alert)) {
            var mensagens = response.data.mensagens ;
            var timeout = 10000; 
            if(mensagens!= undefined){
                        mensagens.forEach(function(element, index, array) {
                            AlertService.add(element.messageType, element.body);
                    });
            }
         }
    }

Provider

'use strict'

angular.module('app').provider('AlertService',
        function() {
            this.$get = [ function() {
                var alerts = [];

                var exports = {
                    add : add,
                    clear : clear,
                    get : get
                }

                function clear() {
                    alerts = [];
                }

                function get() {
                    return alerts;
                }

                function add(type, msg) {
                    var alert = {
                        type : type,
                        msg : msg,
                    };

                    alerts.push(alert);

                    return alert;
                }

                return exports;
            } ];
        });

Diretiva

'use strict';
angular
        .module('app')
        .directive(
                'mcAlert',
                function(AlertService) {
                    return {
                        restrict : 'E',
                           template:  '<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>',
                        controller : [ '$scope', function($scope) {
                            $scope.alerts = AlertService.get();

                            $scope.$on('$destroy', function() {
                                AlertService.clear();
                            });

                            $scope.closeAlert = function(index)  {
                                $scope.alerts.splice(index, 1);
                            }
                        }]
                    }
                });
10
  • Como está o html do modal e da página que chama o modal? Commented 4/03/2016 às 12:13
  • Você quer ver ele todo? ou só a parte da diretiva?
    – adelmo00
    Commented 4/03/2016 às 12:14
  • Só a parte que tem a diretiva Commented 4/03/2016 às 12:15
  • Chamei ela dessa forma: <mc-alert />. Se quiser o código que é gerado eu coloco.
    – adelmo00
    Commented 4/03/2016 às 12:16
  • Queria saber na realidade se você utiliza a diretiva tanto no modal quanto na página, mas acho que é meio obvio que sim. O que eu acho que está ocorrendo aqui é que você possui um Service que alimenta os alerts em mais de uma lugar. Como o Service é um instância única ele deve estar passando a lista de alerts para os dois lugares que você utiliza a diretiva Commented 4/03/2016 às 12:23

1 Resposta 1

1

Acho que melhor maneira de resolver seu problema sem começar a misturar os scopes é colocar no seu AlertService quem é o callback que ele deve notificar quando o AlertService receber notificações.

Um jeito de fazer isso seria manter uma lista de callbacks no AlertService e deletar elas no destroy, outra seria manter um id por callback e tentar acessar eles por esse Id.

Tentando exemplificar a ideia.

'use strict'

angular.module('app').provider('AlertService',
        function() {
            this.$get = [ function() {
                var alerts = [];
                var callbacks = [];
                var exports = {
                    add : add,
                    clear : clear,
                    get : get
                }

                function clear() {
                    alerts = [];
                    unregisterLastCallback();
                }
                function unregisterLastCallback(){
                   callbacks.remove(<lasts>);
                }
                function registerCallback(callback){
                   callbacks.push(callback);
                }

                //function get() {

                  //  return alerts;
                //}

                function add(type, msg) {
                    var alert = {
                        type : type,
                        msg : msg,
                    };

                    alerts.push(alert);
                    notify();
                    return alert;
                }

                function notify(){
                    callbacks.<PegueUltimoDaLista>(alerts)//passar cópia de alerts;

                 }

                return exports;
            } ];
        });

Aí na diretiva ficaria assim

'use strict';
angular
        .module('app')
        .directive(
                'mcAlert',
                function(AlertService) {
                    return {
                        restrict : 'E',
                           template:  '<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>',
                        controller : [ '$scope', function($scope) {

                            var updateCallback() = function(alerts){
                                $scope.alerts = alerts// certificar de que é uma cópia.
                            }                                      


                            AlertService.registerCallback( updateCallback);
                            $scope.$on('$destroy', function() {
                                AlertService.clear();
                            });

                            $scope.closeAlert = function(index)  {
                                $scope.alerts.splice(index, 1);
                            }
                        }]
                    }
                });

Acho que a implementação usando uma stack de callback talvez seja muito confusa e fácil de ficar errado...mas a idéia que eu queria passar é que você vai ter que ter algum jeito de identificar no AlertService ou no Controller qual diretiva você está se referindo para que apenas ela seja notificada quando os alertas chegarem.

2
  • Fiz a implementação e funcionou. O callback vai ser registrado no momento que o controller é chamado? Se for assim, o controller de listagem é o primeiro, e o do modal o último. Correto?
    – adelmo00
    Commented 4/03/2016 às 14:24
  • Isso. quando a view for renderizada no ciclo de digest do angular ele chama o controller da diretiva e registra o evento. Isso poderia ser feito no link ao invés do controller na diretiva (acho que seria mais correto) do ponto de vista de responsabilidades. Commented 4/03/2016 às 17:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .