À l'aide de l'interface utilisateur du routeur avec Bootstrap-ui modal
Je sais que cela a été couvert à de nombreuses reprises et la plupart des articles font référence à ce morceau de code: Fenêtre modale avec une URL personnalisée dans AngularJS
Mais je n'ai tout simplement pas l'obtenir. Je ne trouve pas ça très clair à tous. J'ai également trouvé ce jsfiddle qui était en fait un excellent, très utiles, sauf ce n'est pas ajouter l'url pour moi d'utiliser la touche retour pour fermer la modale.
Edit: c'est Ce que j'ai besoin d'aide.
Alors laissez-moi vous expliquer ce que je suis en train de réaliser. J'ai un formulaire pour ajouter un nouvel élément, et j'ai un lien "ajouter un nouvel article". Je voudrais que lorsque je clique sur "ajouter un nouvel élément" modale apparaît avec le formulaire, j'ai créé "add-item.html'. C'est un nouvel état, de sorte que l'url modifier /ajouter-élément.
Je peux remplir le formulaire, puis choisissez d'enregistrer ou de fermer. Fermer ferme la modale :p (comme c'est étrange) . Mais je peux aussi cliquer sur retour pour fermer la modale et retournez à la page précédente(de l'etat).
Je n'ai pas besoin d'aide avec Près à ce moment que je l'ai encore de la difficulté à réellement obtenir la modale de travail.
C'est mon code tel qu'il est:
Manette de Navigation: (est-ce vraiment le bon endroit pour mettre les fonctions modales?)
angular.module('cbuiRouterApp')
.controller('NavbarCtrl', function ($scope, $location, Auth, $modal) {
$scope.menu = [{
'title': 'Home',
'link': '/'
}];
$scope.open = function(){
//open modal whithout changing url
$modal.open({
templateUrl: 'components/new-item/new-item.html'
});
//I need to open popup via $state.go or something like this
$scope.close = function(result){
$modal.close(result);
};
};
$scope.isCollapsed = true;
$scope.isLoggedIn = Auth.isLoggedIn;
$scope.isAdmin = Auth.isAdmin;
$scope.getCurrentUser = Auth.getCurrentUser;
$scope.logout = function() {
Auth.logout();
$location.path('/login');
};
$scope.isActive = function(route) {
return route === $location.path();
};
});
C'est la façon dont je suis l'activation du modal:
<li ng-show='isLoggedIn()' ng-class='{active: isActive("/new-item")}'>
<a href='javascript: void 0;' ng-click='open()'>New Item</a>
</li>
new-item.html:
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items"><a ng-click="selected.item = item">{{ item }}</a></li>
</ul>Selected:<b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button ng-click="ok()" class="btn btn-primary">OK</button>
<button ng-click="close()" class="btn btn-primary">OK</button>
</div>
Aussi, tant que ce n'ouvrez un modal ne se ferme pas et comme je ne pouvais pas travailler que.
- Êtes-vous en mesure de fermer votre fenêtre modale lorsque vous cliquez sur fermer? Je suppose que non. droit?
- Non, je n'arrive pas à la fermer. Je ne peux l'ouvrir et même alors, non seulement il n'est pas proche, mais il ne fonctionne pas avec l'état et le Changement d'url, pour que les liens ne fonctionnent pas.
- J'ai fait un Débarquez avec ma dernière tentative pour résoudre cela, mais il"ne fonctionne pas. plnkr.co/modifier/k514Nc25zfr0amtnxXDu?p=preview
- Je viens de voir votre plunker j'ai à dire, je n'ai pas obtenir quoi que ce soit de cela , ses totalement faux, Vous avez défini un contrôleur à l'intérieur de votre open-modale de la fonction Frère, c'est pour mieux vous expliquez votre problème réel tout d'abord,Croyez-moi , une bonne question, d'une valeur de 100 de mauvaises réponses
Vous devez vous connecter pour publier un commentaire.
Il est intuitif de penser à un modal comme le point de vue de la composante de l'état. Prendre une définition de l'état avec un gabarit de vue, un contrôleur et peut-être que certains se résout. Chacune de ces fonctions s'applique également à la définition d'un modal. Aller une étape plus loin et d'état de liaison d'entrée à l'ouverture du modal et de l'état de sortie pour fermer la modale, et si vous pouvez encapsuler l'ensemble de la plomberie, alors vous avez un mécanisme qui peut être utilisé comme un état avec
ui-sref
ou$state.go
pour l'entrée et le bouton de retour ou plus modale des déclencheurs spécifiques pour la sortie.J'ai étudié cette assez largement, et mon approche a été de créer un état modal fournisseur qui pourrait être utilisé de façon analogue à
$stateProvider
lors de la configuration d'un module pour définir les états qui étaient liés à des modaux. À l'époque, j'ai été particulièrement intéressé dans l'unification de contrôle modal licenciement par l'état et modal événements qui devient de plus en plus compliquée que ce que vous demandez, voici donc une exemple simplifié.La clé est de rendre le modal de la responsabilité de l'état et à l'aide de crochets qui modal fournit à maintenir l'état de synchronisation avec indépendante des interactions modales de soutien par l'entremise de la portée ou de son INTERFACE utilisateur.
État d'entrée d'lance le modal. L'état de sortie de la ferme. Le modal pourrait se fermer sur son propre (ex: via la toile de fond de la souris), de sorte que vous devez respecter et mettre à jour l'état.
L'avantage de cette approche est que votre application continue d'interagir principalement avec les etats de l'état et des concepts connexes. Si plus tard vous décidez d'activer l'modal dans un point de vue conventionnel, ou vice-versa, puis très peu de code qui doit changer.
main
mais si je vais à un autre étatabout
- je obtenir ceCould not resolve '.add' from state 'about'
j'ai besoin d'un moyen pour permettre que cela fonctionne au-dessus de tout etat, Principal, Contact, etc comme il est accessible à partir de l'écran de navigation principal.^.add
pour se rendre à ajouter de sur. Jetez un oeil à la documentation de $etat.go et voir si cela aide.$state.go('^.add')
et qui ne fonctionne pas non plus.$state.go
). Lors de la déclaration d'un état, soit vous devez utiliser le nom pleinement qualifié de référence ou un parent de l'état. Donc^.modal1
n'est pas valide lors de la déclaration d'un état. Voici un exemple. Chaque état existent pas sur son propre. Vous pouvez réutiliser les modèles et les contrôleurs, mais il y a un état de déclaration de lamain.modal1
etabout.modal1
.$stateNotFound
événement pour définir les états à la volée. Chaque état doit avoir sa propre définition, mais vous pouvez réutiliser les modèles et les contrôleurs. La nature hiérarchique de l'état définitions s'assure que les url et les noms sont uniques, même si le contenu est le même. Cet exemple indique l'idée de base. (Notez qu'en raison de la façon dont il est configuré, il ne serait pas travailler pour démarrer à partir d'un profond/lien direct vers modal2, mais c'est quelque chose que vous pouvez vous adresser pour les besoins de votre propre mise en œuvre.)resolve
,onEnter
et d'autres parce qu'ils ne sont pas appelésonEnter
etonExit
que certains moyens de code supplémentaire pour appeler les fonctions du client passé comme options. C'est tout assez simple, mais pas vraiment nécessaire pour cet exemple.resolve
de la propriété dans les options que vous transmettez lors de la configuration de l'état. Les options de l'objet sera remis à$modal.open
qui va le prendre à partir de là. Si votre résout ne sont pas connus jusqu'à ce que l'état actuel de transition, c'est ensuite à vous d'attendre jusqu'à ce qu'ils sont réglés pour la déclencher.modalState
méthode à l' $stateProvider.$uibModal
, pas$modal
(comme d'angular-ui/bootstrap v0.14.0), et que si vous avez stricte DI activé, leonEnter
définition ressembleraitonEnter: ['$uibModal', '$state', function($modal, $state) {...}]
Ici est un
provider
qui améliore @nathan williams solution en passantresolve
section jusqu'à lacontroller
:puis l'utiliser comme ça:
J'ai répondu à une question similaire, et a fourni un exemple ici:
Fenêtre modale avec une URL personnalisée dans AngularJS
A un travail complet HTML et un lien vers plunker.
L' $modal lui-même n'a pas une close() funcftion , je veux dire, Si vous console.log($modale) , Vous pouvez voir qu'il y a juste une fonction open ().
De fermer la modale repose sur $modalInstance objet , que vous pouvez utiliser dans votre modalController.
Donc : $modal.fermer(suite) n'est pas réellement une fonction!
Avis :
console.log($modal);
==>> résultat :
Il y a un moyen de remédier à cela , l'une :
Vous devez d'abord définir un contrôleur dans votre modaux comme ceci :
Et , plus Tard, d' :