Angulaire de l'INTERFACE utilisateur-Routeur ouvrir la fenêtre modale sur le changement d'url

- Je utiliser angular-ui-router et angulaire-bootstrap dans mon projet.

Je veux mettre en œuvre, suivre de cas d'utilisation:

Lorsque l'utilisateur clic sur "edit", UI-Router changement d'URL et ouvrir la fenêtre modale. Quand je reviens en cliquant sur le bouton précédente du navigateur, fenêtre modale est en cours de fermeture.

Si l'utilisateur de recharger la page lors de la fenêtre modale s'ouvre, l'application devrait rendre modale du contenu de la fenêtre principale de l'interface utilisateur-vue conteneur.

Ce cas d'utilisation que vous pouvez voir sur ce sire: http://canopy.co/ (essayez de cliquer sur l'article et recharger la page)

Question: Comment mettre en œuvre des comportements décrits 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(){});
InformationsquelleAutor Anton Rodin | 2014-02-08
  1. 19

    Il est un bon exemple ici sur l'interface utilisateur du routeur Faq. La clé est d'utiliser le onEnter param.

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

    Voici un exemple de le faire à l'aide de l'interface utilisateur-bootstrap de dollars modal de service. Cet exemple spécifie uniquement un onEnter fonction. Il n'y a pas de modèle, contrôleur, etc. Donc, essentiellement, le modal est indiqué, puis lorsque sa fermés, il renvoie aux éléments de l'état. Vous êtes toujours responsable de traitement, quel est l'état de votre application transitions lorsque le modal 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('^');
        });
    }
});
    • Cela fonctionne très bien, mais je vois un problème. Quand je clique quelque part sur dark superposition autour du $modal il se ferme, mais il ne génère pas d'événement pour l'état reste le même. Une idée de comment résoudre ce problème?
    • Trouvé la réponse par moi-même. Vous devez ajouter la deuxième fonction de rappel dans then (séparée rappels par une virgule). Cette deuxième fonction de lancement sur dismiss et aussi quand modal est fermé en appuyant sur la touche Echap ou en cliquant sur la superposition.
    • BTW, il a été mis à jour pour utiliser enfin au lieu de alors dans la FAQ, vous liés.
    InformationsquelleAutor ofairfoul
  2. 0

    Voici un problème sur l'INTERFACE utilisateur du Routeur Github décrivant ce que vous essayez de faire:

    Les transitions de l'état similaire à Pinterest de superposition

    Vous pouvez voir la mise en œuvre de cette répondre. Notez bien que la façon dont ils ont été la réalisation de l'effet que vous voulez a été corrigé dans la dernière version et qu'ils utilisent une ancienne version de l'INTERFACE utilisateur du Routeur afin de maintenir la fonctionnalité.

    • Lorsque j'utilise " preventDefault fonction de '$stateChangeStart de l'événement, l'interface utilisateur du routeur ne change pas d'url. Connaissez-vous la solution pour le changement d'url et de prévenir le rendu de l'affichage?
    InformationsquelleAutor Cuong Vo