Boîte de dialogue modale à l'aide de l'interface utilisateur du routeur à partir de n'importe quel parent, comment spécifier correctement l'état?
Je suis en train d'ouvrir une boîte de dialogue modale à l'aide Angulaire de l'interface utilisateur du routeur comme expliqué ici.
L'objectif est pour le dialogue, pour être accessible de partout, une url n'est pas forcément nécessaire, mais il serait bien si je pouvais lien vers une page avec la boîte de dialogue ouvrir.
Ici est cassé exemple:
http://plnkr.co/edit/BLkYME98e3ciK9PQjTh5?p=preview
cliquant sur le bouton "menu" devrait ouvrir la boîte de dialogue à partir d'un page.
La logique de routage:
app.config(function($stateProvider,$locationProvider, $urlRouterProvider, modalStateProvider) {
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
$stateProvider
.state("app", {
url: "",
abstarct: true,
views: {
"" : {
templateUrl: "main.html",
},
"header@app": {
templateUrl: "header.html"
},
"footer@app":{
templateUrl: "footer.html"
}
}
})
.state("app.home", {
url: "/",
templateUrl: "home.html",
})
.state("app.content", {
url: "/content",
templateUrl: "content1.html",
});
modalStateProvider.state("app.home.menu", {
template: "I am a Dialog!",
controller: function ($scope) {
$scope.dismiss = function () {
$scope.$dismiss();
};
}
});
});
Il ne devrait pas être un enfant de la "app.accueil" puisque je veux qu'il soit accessible de n'importe où. Comment puis-je y parvenir?
OriginalL'auteur fusio | 2014-10-06
Vous devez vous connecter pour publier un commentaire.
Vous pouvez le faire avec l'INTERFACE utilisateur du Routeur Extras "Collante États".
Mis à jour plunk: http://plnkr.co/edit/GYMjzmBALlQNFWoldmxa?p=preview
Ici est l'INTERFACE utilisateur du Routeur Extras modal démo: http://christopherthielen.github.io/ui-router-extras/example/stickymodal/#/
De mettre à jour votre plunk, j'ai ajouté de l'INTERFACE utilisateur-Routeur Extras:
J'ai ajouté un nommé ui-view pour l'application et un pour le modal
Puis j'ai marqué de votre application comme
sticky
et faites votre modal à un haut niveau de l'état. L'effet est que vous pouvez accéder à partir de n'importeapp.*
de l'état à l'état modal... au lieu de sortir de cet état, il ne "inactiver", et qu'il reste dans les DOM.mis à jour avec la réponse à la question dans les commentaires:
Vous pouvez le faire vous-même à l'aide d'un tas de stupide logique.
petite question: si je donne le "menu" de l'état d'une URL (
/menu
) et l'utilisateur accède à l'URL (website.com/menu
) est-il un moyen de définir un "défaut" collant pour laapp
vue? (une sorte de défaut parent de l'modaux) @ChrisIl n'existe actuellement aucun mécanisme pour permettre cela. Vous pourriez faire quelques compliqué conditionnelles de vous-même. Je vais mettre à jour la réponse au lieu de le saisir ici.
Merci, très utile!
Si un collant état a de nombreux de nombreux enfant, les états, et à tous ceux enfant, les états ont des contrôleurs, puis en gardant tous les états vivante, si inactif, pourrait-il y avoir tout le potentiel de l'allocation de la mémoire des questions?
OriginalL'auteur Chris T