angularjs:-Uncaught Error: [$injector:modulerr] issue while running code

Question

您好，我试图在 angular 中实现弹出窗口，但在这样做时出现错误 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)

下面是我写的代码。

     <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>

我不确定为什么会收到错误消息以及解决方法。没有从在线资源和 angular 网站获得任何帮助..

我知道文件中缺少某些模块，但不确定如何检查它。

有人能帮帮我吗..我陷入了困境。

非常感谢大家

Answer 1

更新：

您缺少 ui.bootstrap.js 文件。请包括在内。包含 bootstrap.js.

是不够的

此外，请使用 $uibModal 而不是 $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 应该在 bootstrap js 之前。你能试试吗

Answer 2

尝试用此代码替换

<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>

Answer 3

您没有加载 ui.bootstrap 模块你可以使用 this cdn

Answer 4

看来你还需要添加angular bootsrap-ui参考：例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap.js"></script>

Answer 5

以下代码应该可以工作。

已添加bootstrap.ui js
相应地更改了模块名称

代码：

<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>

angularjs:-Uncaught Error: [$injector:modulerr] issue while running code

angularjs:-Uncaught Error: [$injector:modulerr] issue while running code

javascript

module

popup

angularjs