javascriptangularjsmodal-dialogshowmodaldialogmddialog

angular multiple $mdDialog


I work with modal tabs and I have notification pop-up window which is always shown to user when he logs into my application. It contains all events which happends when user was offline. Problem is when i click on any objects from list it close my pop-up window and display new modal tab.

I want to archieve this functionality. When user log in, notification pop-up window will be shown to user and if he clicks on any object it will open another window without closing my notification pop-up window(New events). I want something like that on picture below which I made.

picture to clarify what I want to archieve

I checked angular material documentation, but there is no demo at all and not even well explained how to work with multiple: true option and I dont know exactly how to make it work like I want.

https://material.angularjs.org/latest/api/service/$mdDialog

This is my code for displaying notification pop-up window.

//show new notifications when user log in
    NotificationService.getUnreadedNotifications(function (data) {
        //initialization
        $scope.notification = [];
        $scope.OverAllCount = 0;
        $scope.messageNotification = [];
        $scope.OverAllMessageCount = 0;

        if (data.ProjectNotifications != null) {
            angular.forEach(data.ProjectNotifications, function (key, value) {
                $scope.notification.push(key);
                $scope.OverAllCount = $scope.OverAllCount + 1;
            });
        }

        if (data.TasksNotifications != null) {
            angular.forEach(data.TasksNotifications, function (key, value) {
                $scope.notification.push(key);
                $scope.OverAllCount = $scope.OverAllCount + 1;
            });
        }

        if (data.MessageNotifications != null) {
            angular.forEach(data.MessageNotifications, function (key, value) {
                $scope.OverAllMessageCount = $scope.OverAllMessageCount + 1;
                $scope.messageNotification.push(key);
            });
        }

        popUpNotification();

        $scope.hide = function () {
            $mdDialog.hide();
        };

        $scope.cancel = function () {
            $mdDialog.cancel();
        };

        $scope.answer = function (answer) {
            $mdDialog.hide(answer);
        };

        //mark notifications as readed when user click on notification
        function popUpNotification() {
            $mdDialog.show({
                controller: NotificationController,
                templateUrl: 'app/components/templates/PopUpNotification.html',
                parent: angular.element(document.body),
                //targetEvent: ev,
                clickOutsideToClose: true,
                fullscreen: false,
                scope: $scope,
                multiple:true,
                preserveScope: true,
                onComplete: function () {
                    $scope.notificationPopUp = $scope.notification;
                }
            })
            .then(function () {

            }, function () {
                //fail
            });
        }
    });

This is code for displaying details of object on which user clicked in new overlaying modal tab

        //mark notifications as readed when user click on notification
    $scope.popUpDetail = function (notification, index, ev) {
        $mdDialog.show({
            controller: NotificationController,
            templateUrl: 'app/components/templates/TaskDetailsDialog.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose: true,
            fullscreen: false,
            scope: $scope,
            multiple: true,
            preserveScope: true,
            onComplete: function () {
                //was readed => update database
                NotificationResourceService.update({ id: notification.Id }, notification);
                $scope.OverAllCount -= 1;
                $scope.notification.splice(index, 1);

                TaskService.get({ id: notification.EntityId })
                    .$promise.then(function (task) {
                        $scope.task = task;
                    });
            }
        })
        .then(function () {

        }, function () {
            //fail
        });
    }

Solution

  • Somehow i found working solution for my problem. It might help somebody in future.

    Working code:

     function popUpNotification() {
                $mdDialog.show({
                    templateUrl: 'app/components/templates/PopUpNotification.html',
                    clickOutsideToClose: true,
                    bindToController: true,
                    scope: $scope,  
                    preserveScope: true,
                    controller: function ($scope, $mdDialog) {
                        $scope.notificationPopUp = $scope.notification;
                        $scope.popUpDetail = function (notification, index, ev) {
                            $mdDialog.show({
                                controller: function ($mdDialog) {
                                    this.click = function () {
                                        $mdDialog.hide();
                                    }
                                },
                                targetEvent: ev,
                                clickOutsideToClose: true,
                                preserveScope: true,
                                autoWrap: true,
                                skipHide: true,
                                scope: $scope,
                                preserveScope: true,
                                templateUrl: 'app/components/templates/TaskDetailsDialog.html',
                                onComplete: function () {
                                    TaskService.get({ id: notification.EntityId })
                                        .$promise.then(function (task) {
                                            $scope.task = task;
                                        });
                                }
                            })
                        }
                    },
                    autoWrap: false,
                })
            }
            });