Angular Открытое окно интерфейса UI-Router при изменении URL-адреса

Я использую angular -ui-router и angular -bootstrap в моем проекте.

Я хочу реализовать следующий прецедент:

Когда пользователь нажимает кнопку "Изменить", UI-Router изменяет URL-адрес и открывает модальное окно. Когда я вернусь, нажмите кнопку браузера, модальное окно закрывается.

Если пользователь перезагружает страницу при открытии модального окна, приложение должно отображать содержимое модального окна в главном контейнере ui-view.

Этот пример использования, который вы можете увидеть у этого автора: http://canopy.co/ (попробуйте нажать на элемент и перезагрузить страницу)

Вопрос: Как реализовать описанное выше поведение?

Вот мой jsFiddle http://jsfiddle.net/sloot/ceWqw/3/

var app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])
.config(function ($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('app', {
      url: '/',
      controller: 'AppCtrl',
      templateUrl: '/views/app.html'
    })
    .state('item', {
      url: '/profile',
      controller: 'ItemCtrl',
      templateUrl: '/views/item.html'
    });
})
.controller('AppCtrl', function($scope, $modal, $state){
  $scope.open = function(){

    // open modal whithout changing url
    $modal.open({
      templateUrl: '/views/item.html'
    });

    // I need to open popup via $state.go or something like this
  };
})
.controller('ItemCtrl', function(){});

Ответы

Ответ 1

Здесь есть большой пример в часто задаваемых вопросах ui-router. Ключ использует параметр onEnter.

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

Вот пример того, как это сделать с использованием модального сервиса ui-bootstrap $. В этом примере указывается только функция onEnter. Нет шаблона, контроллера и т.д. Таким образом, по существу модальный отображается, а затем, когда он закрывается, он возвращается к состоянию элементов. Вы по-прежнему несете ответственность за то, в каком состоянии переходит ваше приложение, когда модальный закрывается.

$stateProvider.state("items.add", {
    url: "/add",
    onEnter: function($stateParams, $state, $modal, $resource) {
        $modal.open({
            templateUrl: "items/add",
            resolve: {
              item: function() { new Item(123).get(); }
            },
            controller: ['$scope', 'item', function($scope, item) {
              $scope.dismiss = function() {
                $scope.$dismiss();
              };

              $scope.save = function() {
                item.update().then(function() {
                  $scope.$close(true);
                });
              };
            }]
        }).result.finally(function() {
            $state.go('^');
        });
    }
});

Ответ 2

Здесь проблема с UI-Router Github, описывающая, что вы пытаетесь сделать:

Переходы состояний, похожие на наложение Pinterest

Вы можете увидеть реализацию в этом ответе. Обратите внимание, что способ достижения желаемого эффекта был исправлен в последней версии, и они используют более старую версию UI-Router для поддержания функциональности.