wake-up-neo.com

Angular UI-Router offenes modales Fenster bei Änderung der URL

Ich verwende in meinem Projekt angle-ui-router und angle-bootstrap.

Ich möchte folgenden Anwendungsfall implementieren:

Wenn der Benutzer auf die Schaltfläche "Bearbeiten" klickt, ändert der UI-Router die URL und öffnet das modale Fenster. Wenn ich durch Klicken auf die Schaltfläche "Zurück" des Browsers zurückspringe, wird das modale Fenster geschlossen.

Wenn der Benutzer die Seite neu lädt, wenn das modale Fenster geöffnet ist, sollte die Anwendung den Inhalt des modalen Fensters im Hauptfenster der Ui-Ansicht darstellen.

Diesen Anwendungsfall können Sie auf diesem Vater sehen: http://canopy.co/ (versuchen Sie, auf das Element zu klicken und die Seite neu zu laden)

Question: Wie implementiere ich das oben beschriebene Verhalten?

Hier ist mein 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(){});
24
Anton Rodin

Es gibt ein gutes Beispiel hier in den FAQs des ui-routers. Der Schlüssel verwendet den Parameter onEnter.

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

Hier ein Beispiel dafür, wie Sie den $ modal-Dienst von ui-bootstrap verwenden. In diesem Beispiel wird nur eine onEnter-Funktion angegeben. Es gibt keine Vorlage, keinen Controller usw. Daher wird im Wesentlichen der Modalmodus angezeigt. Wenn er geschlossen wird, kehrt er in den Elementstatus zurück. Sie sind weiterhin dafür verantwortlich, zu welchem ​​Status Ihre App übergeht, wenn der modale Modus geschlossen wird.

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

Hier ist ein Problem mit UI-Routers Github, das beschreibt, was Sie zu tun versuchen:

Zustandsübergänge ähnlich der Pinterest-Überlagerung

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

0
Cuong Vo