web-dev-qa-db-fra.com

$ uibModalInstance undefined (AngularJS UI.Bootstrap)

Pourquoi $ uibModalInstance ne peut-il pas être injecté ici?

http://plnkr.co/edit/mi9Ytv0HaqE47ENod4Gn?p=preview

baseController.$inject = ['$uibModal', '$uibModalInstance'];

function baseController($uibModal, $uibModalInstance) {

self.ok = function () {
$uibModalInstance.close(self.selected.item);
};

self.cancel = function () {
$uibModalInstance.dismiss('cancel');
};

J'essaie d'accéder à $ uibModalInstance et si j'essaie de l'injecter, j'obtiens une erreur d'injection. 

Si je ne l'injecte pas, c'est indéfini ...

angularjsmodal-dialogangular-ui-bootstrap
5
RenleyRenfield

Donc, BEAUCOUP de grandes déclarations ici, mais aucune d’entre elles n’a tout à fait résolu le problème. 

amg-argh mon plkr a fonctionné comme je l'avais fait pour mon injection 

http://plnkr.co/edit/GXXmUosUEnEO3Tk0gUyp?p=preview

La plus grande magie est venue de ce montage ici ... 

var childController = function ($scope, $uibModalInstance) {
        $scope.ok = function () {
            $uibModalInstance.close({ my: 'data' });
        }
        $scope.cancel = function () {                
            $uibModalInstance.dismiss();
        }
    }

    self.open = function (size) {

        var modalInstance = $uibModal.open({
            animation: self.animationsEnabled,
            templateUrl: 'help.html',
            controller: childController,
            size: size
        });
    };

+++++++++++++++++++++++++++++++

Je tiens également à noter que ceci DEVRAIT être effectué ultérieurement en tant que service, comme l'a souligné icfantv . Mais je dois trouver la syntaxe pour retourner et utiliser la promesse du modal ... 

Merci à tous pour votre aide!! 

À votre santé!

3
RenleyRenfield

Il y avait quelques problèmes avec votre exemple Plunk:

L'ordre dans lequel vous chargez vos scripts est important, vous aviez:

<script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.module.js"></script>
<script src="childController.js"></script>
<script src="baseController.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>

Cela ne fonctionnera pas car app.module.js dépend de angular-ui-bootstrap.js et childController.js dépend de angular-animate.js et childController.js dépend de baseController.js. Vous devez charger les scripts dans l'ordre suivant :

<script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="app.module.js"></script>
<script src="baseController.js"></script>
<script src="childController.js"></script>

Dans childcontroller.js, vous avez:

angular
      .module('app', ['ngAnimate'])

Ce qui recrée et écrase l'application créée dans le fichier app.module.js. Vous devriez injecter le module ngAnimate dans votre app.module.js comme ceci:

angular
    .module('app', ['ngAnimate', 'ui.bootstrap']);

Vous n'avez pas besoin d'une référence à $ uibModalInstance dans votre contrôleur de base, le:

var modalInstance = $uibModal.open({
  animation: self.animationsEnabled,
  templateUrl: 'help.html',
  controller: 'BaseController',
  size: size
});

vous donne accès au modal que vous avez ouvert par le biais de 'var modalInstance' qui a des méthodes de fermeture et de rejet.

1
Rob J

Je soupçonne que votre code échoue parce que vous essayez d’injecter l’instance modale dans le contrôleur responsable de la création du modal. Il ne peut pas l'injecter car il n'existe pas encore. Essayez d’utiliser des contrôleurs distincts: un pour ouvrir le modal et un autre pour traiter le contenu modal. Vous pouvez voir un exemple de cela dans la partie Javascript de notre exemple modal .

TBH, je n'ai jamais vu de dépendances s'injecter de cette façon auparavant. Y a-t-il un problème que vous résolvez en faisant cela? N'importe quelle raison que vous n'utilisez pas:

angular.module(...).controller('MyController', ['dep1', dep2', ..., MyControllerFunction]);
function MyControllerFunction(dep1, dep2) {...}
1
icfantv