web-dev-qa-db-fra.com

Impossible de charger le modèle: uib/template/modal/window.html

Je sens que j'ai tout essayé et j'ai toujours l'erreur:

Impossible de charger le modèle: uib/template/modal/window.html 

dans mon fichier d'index, j'ai ajouté ce qui suit:

<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>
<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

dans mon fichier app ive ajouté:

    'ui.bootstrap',

Et dans mon fichier de contrôleur ive ajouté ce qui suit:

$uibModal

et

this.openPayment = function () {
    var modalInstance = $uibModal.open({
        ariaLabelledBy: 'modal-title',
        ariaDescribedBy: 'modal-body',
        templateUrl: 'payment.html',
        controller: 'paymentController',
        controllerAs: '$ctrl',
        size: 'lg',
    });
}

dans ma paymentController j'ai ajouté ce qui suit:

angular.module('Payment').controller('paymentController', function ($uibModalInstance) {
    var ctrl = this;
});

Et payment.html:

    <div class="modal-header">
    <h3 class="modal-title" translate="ACADEMY.EDIT.COURSES.CREATE"></h3>
</div>
<div class="modal-body">
</div>
<div class="lb-modal-footer">
    <a class="btn btn-grey" tooltip="{{ 'TOOLTIP.CANCEL' | translate }}" ng-click="CTRL.cancel()"><i
            class="fa fa-ban"></i></a>
    <button class="btn btn-success m-l-xs {{CTRL.academyCourse.course ? '':'disabled'}}" tooltip="{{ 'TOOLTIP.SAVE_AND_EXIT' | translate }}" ng-click="CTRL.addCourse()"><i
            class="fa fa-check-square-o"></i></button>
</div>

Alors, quelqu'un peut-il me dire ce que j'ai fait de mal?

javascriptangularjsangular-ui-bootstrap
8
Marc Rasmussen

  1. Assurez-vous d’avoir joint la version de template de ui-bootstrap ou celle qui ne le contient pas.

    <!-- remove this -->
<!--<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js"></script>--> 
<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

Dans votre cas, vous manquez le modèle modal (uib/template/modal/window.html), donc je garderais le ui-bootstrap-tpls.js.

  1. Assurez-vous de lier correctement le script, accédez à la source de la page et essayez d’atteindre le script uib. Il est possible que vous ayez construit votre projet, mais le fichier de script n’a pas été ajouté à la construction.

  2. assurez-vous d’ajouter le script uib after vous ajoutez le script angular et after vous ajoutez les fichiers d’amorçage dans votre index.html

24
svarog

Je résous ce programme acheter en supprimant la référence à ui-bootstrap.js, en utilisant la référence à ui-bootstrap-tpls.js uniquement, tout corrigé.

2
ylxbcoding