web-dev-qa-db-fra.com

Fenêtre modale ouverte du routeur d'interface utilisateur angulaire sur le changement d'URL

J'utilise angular-ui-router et angular-bootstrap dans mon projet.

Je souhaite implémenter le cas d'utilisation suivant:

Lorsque l'utilisateur clique sur le bouton "modifier", UI-Router change d'URL et ouvre la fenêtre modale. Quand je reviens en cliquant sur le bouton retour du navigateur, la fenêtre modale se ferme.

Si la page de rechargement de l'utilisateur lorsque la fenêtre modale est ouverte, l'application doit restituer le contenu de la fenêtre modale dans le conteneur principal ui-view.

Ce cas d'utilisation que vous pouvez voir sur ce père: http://canopy.co/ (essayez de cliquer sur l'élément et de recharger la page)

Question: Comment implémenter le comportement décrit ci-dessus?

Voici mon 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(){});
javascriptangularjsbootstrap-modalangular-ui-router
24
Anton Rodin

Il y a un bon exemple ici sur la FAQ de ui-router. La clé utilise le paramètre onEnter.

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

Voici un exemple de le faire en utilisant le service $ modal de ui-bootstrap. Cet exemple spécifie uniquement une fonction onEnter. Il n'y a pas de modèle, contrôleur, etc. Ainsi, le modal est affiché, puis lorsqu'il est fermé, il revient à l'état des éléments. Vous êtes toujours responsable de la gestion de l'état de transition de votre application lorsque le modal se ferme.

$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

Voici un problème sur le Github de UI-Router décrivant ce que vous essayez de faire:

Les transitions d'état similaires à la superposition de Pinterest

Vous pouvez voir l’implémentation dans cette réponse . Notez que la manière dont ils ont obtenu l'effet souhaité a été corrigée dans la dernière version et qu'ils utilisent une version plus ancienne de UI-Router pour maintenir les fonctionnalités.

0
Cuong Vo