8
votes

Ouverture d'une modale dans un itinéraire en angularjs avec ui-bootstrap angulaire

J'essaie de faire ce qui était essentiellement répondu ici ici incapable Pour ouvrir la fenêtre modale de bootstrap comme itinéraire

MA SOLUTION NE FONCTIONNE PAS. Je reçois une erreur p>

Erreur: [$ INJUSTEUR: DEL] Fournisseur inconnu: $ modalprovider p>

appControllers.controller('LoginCtrl', ['$scope', '$modal', function($scope, $modal) {
    $modal.open({templateUrl:'modal.html'});
}]);


11 commentaires

Votre contrôleur n'a pas besoin de '$ modal' comme une dépendance que vous avez chargée 'ui.bootstrap' dans vos dépendances de l'application. Pourriez-vous essayer de le supprimer? (Mais laissez le $ modal dans le paramètre de fonction contrôleur););)


Nope - maintenant je reçois RéférenceError: $ modal n'est pas défini


Également vérifié pour vous assurer que l'ui-bootstrap.js angulaire est chargé après angular.js, et c'est


Ok, et n'est pas 'ui.bootstrap.modal' un module séparé de 'ui.bootstrap' ? Peut-être essayez-vous de le charger dans vos dépendances de votre application ou de contrôleur. Je n'utilise que le modal de l'UI-Bootstrap angulaire et c'est comme ça que je le charre.


J'ai la complète JS - moins je crois que je le fais - il contient cette ligne: .provider ('$ modal', fonction () {


@glepretre Ce n'est pas le cas. @Daren, c'est étrange: 'ui.bootstrap', 'ui.bootstrap.tpls' - Vous ne devez pas avoir besoin de 2 dépendances différentes, 'ui.bootstrap' devrait être assez. En tout cas, un plunker vous donnerait une réponse en un rien de temps ...


Je peux supprimer le 'ui.bootstrap.tpls' dépendance - ne semble pas casser quoi que ce soit d'autre. En ce qui concerne le plunker - je crois que j'ai à peu près copié cela - Sans le nègille que j'utilise Ui-routeur plnkr.co/edit/33572YOSA2S89UELMKB?p=preview


Pourrait-il être que vous injectionnez «ui-bootstrap» dans l'application et non appcontrôleurs?


@Mattway - pas idée ici..


On dirait que vous pourriez avoir à essayer de recréer le problème dans un violon / plunk


ajouté un - bien que comme ma solution, ce n'est pas une chose sanglante soit O_O


4 Réponses :


5
votes

Je travaille sur quelque chose de similaire et c'est ma solution.

code HTML p> xxx pré>

configuration de l'état p> xxx pré>

Contrôleur à domicile P>

angular.module("app").controller('ModalInstanceController', function($scope,    $modalInstance, $state, newPath, oldPath) {
    $modalInstance.opened.then(function(){
        $state.go(newPath);
    });
    $modalInstance.result.then(null,function(){
        $state.go(oldPath);
    });
    $scope.$on('$stateChangeSuccess', function () {
        if($state.current.name != newPath){
            $modalInstance.dismiss('cancel')
        }
    });
});


0 commentaires

2
votes

J'ai trouvé un indice pratique pour que cela fonctionne. Il y a probablement des mises en garde, mais cela fonctionne pour moi. Vous pouvez passer un résultat code> toujours mais je n'en ai pas besoin d'un.

Utilisation de enfin code> au lieu du , puis code> promesse résolve résolve triée ceci pour moi . J'ai aussi dû stocker l'état précédent sur Rootscope afin que nous sachions quoi revenir à. P>

sauvegarder l'état précédent à $ rootscope strong> p> xxx pré >

Etat à l'aide d'Onenter STRY> P>

$stateProvider.state('contact', {
    url: '/contact',
    onEnter: function ($state, $modal, $rootScope){
        $modal.open({
            templateUrl: 'views/contact.html',
            controller: 'ContactCtrl'
        }).result.finally(function(){
            $state.go($rootScope.previousState);
        })
    }
});


0 commentaires

11
votes

Bonjour, j'ai eu du mal à traverser le problème similaire. Cependant, j'ai pu le résoudre. C'est ce que vous auriez probablement besoin. XXX

Cliquez ici pour PLUCKER. J'espère que cela aide.


1 commentaires

Cela ne semble pas fermer la boîte de dialogue lorsque vous appuyez sur



3
votes

Vous pouvez créer un état avec le même templateRL et Controller comme page où vous souhaitez afficher l'objet modal, ajout de parames objet à Il xxx

et dans le contrôleur de la page, utilisez ce paramètre pour ouvrir le modal xxx


0 commentaires