Модальные всплывающие окна в AngularJS с использованием углового-UI-маршрутизатор ($ stateProvider) без обновления браузера в URL-адрес

Question

Мои критерии были:

1. Открыть модальное из любого места в моем приложении
2. Не переписывать URL, оставить как есть из перед открытием модального
3. при нажатии на кнопку возврата на браузер не помню модальные состояния и возобновлять их
4. не включать много вариантов в разметке, когда щ-sref используется

Я использую $ stateProvider в своем приложении angularjs для обработки маршрутизации. Мне нравится, как легко отображать модальные атрибуты атрибутов ui-sref вместе с событием onEnter в функции .state.

Проблема, с которой я сталкиваюсь, заключается в том, что я хочу иметь возможность отображать модальную верхнюю часть любой страницы в моем приложении, не перенаправляя ее на маршрут для модального всплывающего окна.

В настоящее время я использую переход для возврата к предыдущему состоянию до того, как модальный был открыт, но он грязный, и вы можете видеть, как страница меняется за модальной маской.

Кто-нибудь знает, как создать настоящие глобальные модалы с помощью $ stateProvider, или мне нужно будет запустить свой собственный модальный менеджер, чтобы справиться с ним. У меня уже есть это место для диалогов Confirmation, но это немного грязно, поскольку у меня есть много ng-кликов по всей разметке и функция $ scope.click = во многих контроллерах вместе с событиями $ on и $ broadcast/$ emit, которые я не знаю, (если я могу помочь).

UPDATE 15/10/15

При переходе к модели состояний Я также не хочу, чтобы изменить URL/STORE состояние в браузерах обратно историю.

UPDATE 15/10/15 - 30 минут после предыдущего обновления

мне удалось решить это - см ответить ниже.

Answer 1

Я разработал его.

У меня есть следующие состояния:

$stateProvider.state("default.mychannels.modalpopup", { 
     url: 'XXX', 
     data: { isModal: true }, 
     onEnter: ['$stateParams', '$state', '$modal', function ($stateParams, $state, $modal) { 
      modal = $modal.open({ 
       ... 
      }); 
     }], 
     onExit: function() { 
      modal.close(); 
     } 
    }); 

Как вы можете видеть, я устанавливаю свойство данных о том, это состояние является ли модальное или нет.

Тогда в случае $ stateChangeStart я сделать следующее:

$rootScope.$on('$stateChangeStart', function (event, to, toParams, from, fromParams) { 

     var isModal = false; 

     if (to.data != undefined) { 
      isModal = to.data.isModal == undefined ? false : to.data.isModal; 
     } 

     if (isModal) { 
      event.preventDefault(); 
      $state.go(to, toParams, { 
       location: false, notify: false 
      }); 

     } else { 

      var requiresAuth = to.data && to.data.requiresAuth; 
      var isAuthenticated = authenticationService.isLoggedIn(); 
      if (requiresAuth) { 
       if (!isAuthenticated) { 
        event.preventDefault(); 

        event.currentScope.loginConfirmedState = to.name; 
        event.currentScope.loginConfirmedStateParams = toParams; 

        // user is not logged in 
        $rootScope.$broadcast('event:auth-loginRequired'); 
       } 
      } else { 
       $rootScope.$broadcast('event:auth-loginNotRequired'); 
      } 
     } 
     $rootScope.previousState = from; 
     $rootScope.previousStateParams = fromParams; 

    }); 

Ключевой частью этого фрагмента кода, кроме подбирая isModal свойства данных , являются свойства обеспечивают на ходу функция.

$state.go(to, toParams, { 
       location: false, notify: false 
      }); 

Вы должны установить местоположение ложь в пределах $ вариантов state.go - это не будет обновлять URL браузера (и, следовательно, не будет вдаваться в браузеры обратно историю).

Вам также необходимо установить уведомление в false в параметрах $ state.go - это предотвратит вызов $ stateProvider из-за вызова $ state.go изнутри. Это предотвратит бесконечный цикл.

Довольно просто, но мне было трудно найти решение, но в конечном итоге его разработали.