Message appears in modal and page at the same time

Question

Message appears in modal and page at the same time

Navigation

#1 by (1 votes)

0

I created a "message center" in Angularjs that injects messages on the screen. The message always appears when an error occurs in the REST or success operations. This is done by an interceptor that checks whether the response has a message header, if it is, it injects the message and type into the provider, and the policy prints to the screen.

The problem is that the message appears in the Modal, which is right, and also appears on the page that called the modal the first time I open the page the other times does not appear.

First time you saved a user:

Second,afterclosingthemodalandthemessagethatappearedonthelistscreen:

Interceptor(whichissetupin$httpProvider):

angular.module('app').factory('notificationInterceptor',function($q,AlertService){return{responseError:function(response){addMessage(response);return$q.reject(response);},response:function(response){addMessage(response);returnresponse;}};functionaddMessage(response){varalert=response.headers('X-applicationMessage');if(angular.isString(alert)){varmensagens=response.data.mensagens;vartimeout=10000;if(mensagens!=undefined){mensagens.forEach(function(element,index,array){AlertService.add(element.messageType,element.body);});}}}

Provider

'usestrict'angular.module('app').provider('AlertService',function(){this.$get=[function(){varalerts=[];varexports={add:add,clear:clear,get:get}functionclear(){alerts=[];}functionget(){returnalerts;}functionadd(type,msg){varalert={type:type,msg:msg,};alerts.push(alert);returnalert;}returnexports;}];});

Policy

'usestrict';angular.module('app').directive('mcAlert',function(AlertService){return{restrict:'E',template:'<uib-alertng-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);
                            }
                        }]
                    }
                });

javascript angularjs angularjs-directives angularjs-services

asked by anonymous 04.03.2016 / 13:05

1 answer

Images are not inside the div Error while trying to upgrade Visual Studio 2015 / Framework to version 4.6.1

score 1 · Accepted Answer

I think the best way to solve your problem without starting to mix the scopes is to put in your AlertService who is the callback that it should notify when AlertService receives notifications.

One way of doing this would be to keep a list of callbacks in the AlertService and delete them in destroy, another would be to keep an id by callback and try to access them by that Id.

Trying to exemplify the idea.

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

There in the directive would look like this

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

I think the implementation using a callback stack might be too confusing and easy to get wrong ... but the idea I wanted to get through is that you're going to have to have some way of identifying in AlertService or Controller what policy you is referring to only being notified when the alerts arrive.