Salut, j'essayais d'implémenter une fenêtre contextuelle angulaire, mais ce faisant, j'obtiens l'erreur Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=PopupDemo&p1=Error%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.9%2Fangular.min.js%3A19%3A463)

Ce qui suit est le code que j'ai écrit.

     <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body ng-app="PopupDemo">
<div ng-controller="PopupDemoController">
<a ng-click="open()">Open Popup</a>
</div>

    <script>
        angular.module('PopupDemo', ['ui.bootstrap']);
        angular.module('PopupDemo')
                .controller('PopupDemoController',['$scope','$modal',function ($scope, $modal) {

        $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: 'first.html',
        });
}
}]);
    </script>
</body>

Je ne sais pas pourquoi j'obtiens l'erreur et quelle est la solution ... Je n'obtiens aucune sorte d'aide des ressources en ligne et du site Web angulaire ..

Je sais qu'il y a un module qui manque dans le fichier, mais je ne sais pas comment le vérifier.

Quelqu'un peut-il m'aider s'il vous plaît ... Je suis coincé là-dedans.

Merci beaucoup les gars

0
user5406193 7 mars 2016 à 16:12

5 réponses

Meilleure réponse

Le code suivant devrait probablement fonctionner.

  • Ont ajouté bootstrap.ui js
  • Modification du nom du module en conséquence

Code:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>   
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body ng-app="PopupDemo">
<div ng-controller="PopupDemoController">
    <a ng-click="open()">Open Popup</a>
</div>

<script>
    var myMod = angular.module('PopupDemo', ['ui.bootstrap']);
    myMod.controller('PopupDemoController', ['$scope', '$uibModal', function($scope, $modal) {

        $scope.open = function() {
            var modalInstance = $modal.open({
                templateUrl: 'first.html',
            });
        }
    }]);
</script>
</body>
0
Keerthi Kumar P 7 mars 2016 à 13:36

Essayez de remplacer par ce code

<script>
    var app = angular.module('PopupDemo', ['ui.bootstrap']);
    app.controller('PopupDemoController', ['$scope', '$modal',    function($scope, $modal) {
            $scope.open = function() {
                var modalInstance = $modal.open({
                    templateUrl: 'first.html',
                });
            }
        }]);
</script>
0
RamaKrishna 7 mars 2016 à 13:19

Il semble que vous devez également ajouter une référence bootstrap-ui angulaire: Par exemple:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap.js"></script>
0
Gleb Filimonov 7 mars 2016 à 13:24

Vous n'avez pas chargé le module ui.bootstrap vous pouvez utiliser ce cdn

0
Zamboney 7 mars 2016 à 13:23

Mise à jour:

Il manque le fichier ui.bootstrap.js. veuillez l'inclure. Il ne suffit pas d'inclure bootstrap.js.

Veuillez également utiliser $ uibModal au lieu de $ modal

myApp.controller('myController', ['$scope', '$uibModal', function($scope, $uibModal) {
            $scope.hi = "hello world"; 

            $scope.open = function() {
                var modalInstance = $uibModal.open({
                    template: '<h1>Hello world</h1>',
                });
            }
        }]);

JQuery js doit venir avant bootstrap js. Pourriez-vous s'il vous plaît essayer cela

0
Naga Sandeep 7 mars 2016 à 13:26