Angular UI-Router öffnen modales Fenster auf URL ändern

Question

Ich benutze angular-UI-Router und angular-Bootstrap in meinem Projekt.

Ich will follow Anwendungsfall implementieren:

Wenn Benutzer klicken Sie auf „Bearbeiten“ klicken, UI-Router ändern URL und offenen modale Fenster. Wenn ich zurück gehe, indem ich auf den Zurück-Knopf des Browsers klicke, schließt sich das modale Fenster.

Wenn der Benutzer die Seite neu lädt, wenn das modale Fenster geöffnet wird, sollte die Anwendung den modalen Fensterinhalt im Haupt-UI-View-Container darstellen.

Dieser Anwendungsfall können Sie auf diesem Vater sehen: http://canopy.co/ (anprobieren Artikel klicken und lädt Seite)

Frage: Wie oben beschriebenes Verhalten implementieren?

Hier ist meine 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(){}); 

Answer 1

Hier ist ein Problem auf UI-Routers Github beschreiben, was Sie zu tun versuchen:

State transitions similar to Pinterest's overlay

Sie können die Implementierung in dieser reply sehen . Beachten Sie, dass die Art und Weise, wie sie den gewünschten Effekt erzielt haben, in der neuesten Version gepatcht wurde und sie eine ältere Version des UI-Routers verwenden, um die Funktionalität beizubehalten.

Answer 2

Es gibt ein großartiges Beispiel hier auf den ui-router FAQs. Der Schlüssel verwendet den onEnter-Parameter.

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

Hier ist ein Beispiel dafür ui-Bootstrap-modalen Service $ zu tun verwenden. In diesem Beispiel wird nur eine onEnter-Funktion angegeben. Es gibt keine Vorlage, Controller usw. Im Wesentlichen wird das Modal angezeigt, und wenn es geschlossen ist, kehrt es zum Status der Elemente zurück. Sie sind immer noch dafür verantwortlich, mit dem Zustand umzugehen, in den Ihre App beim Schließen des Modals übergeht.

$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('^'); 
     }); 
    } 
});