Question

我在app.js中注入uibModal依赖项时出现问题：

Angular Version: 1.5.7
ui.boostrap Version: 1.3.3
Bootstrap Version：3.3.6

我一直收到这个错误：

angular.js:13708 Error: [$injector:unpr] Unknown provider: $uibModal Provider <- $uibModal <- ModalController

App.js：

var app = angular.module('App', ['ui.bootstrap', 'ui.bootstrap.tpls']);

app.controller('ModalController', ['$scope', '$uibModal ', function($scope, $uibModal) {
    $scope.showModal = function() {
        var modalInstance = $uibModal.open({
            animation: true,
            templateUrl: '../HTML/templates/login-modal.html',
            controller: 'newModalController',
            show: true
        });
    };
}]);

app.controller('newModalController', function($scope, $uibModalInstance) {
    $scope.close = function() {
        $uibModalInstance.dismiss('close');
    };
});

的index.html ：

<html lang="en">
    <head>
        <title>App</title>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://cdn.jsdelivr.net/angular.bootstrap/1.3.3/ui-bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/angular.bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
    <script src="../resources/js/app.js"></script>
    </head>
    <body ng-app="App">
        <header>
            <nav>
                <div class="row" ng-controller="ModalController">
                    <img src="../resources/img/logos.png" alt="logo" class="logo">
                    <ul class="nav-list">
                        <li><a href="#" class="learn-more-link">Learn More</a></li>
                        <li><a href="#" class="login-button-link" ng-click="showModal()">Take Action</a></li>
                    </ul>
                </div>
            </nav>
        </header>
    </body>
</html>

Answer 1

对于模态，您还需要 ui-bootstrap-tpls 。

Answer 2

对于需要使用以下版本的人提供帮助的任何人：

Angular Version: 1.5.7
Angular Animate: 1.5.7
ui.boostrap-tpls Version: 1.3.3
Bootstrap Version: 3.3.6

在您的主index.html中包含脚本。您只需要angular, angular-animate, ui.boot-tpls, and bootstrap：

<html lang="en">
    <head>
        <title>App</title>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <script src="../vendors/js/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
        <script src="../vendors/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
        <script src="../resources/js/app.js"></script>
    </head>
    <body>
     ...
    </body>
</html>

Answer 3

首先，你有两个控制器做同样的事情。当你只能有一个，但在这种情况下，这不是问题只是一个糟糕的设计。

尝试重写你的第一个控制器而不是这个

app.controller('ModalController', ['$scope', '$uibModal ', function($scope, $uibModal) {

这样做：

app.controller('ModalController', function ($scope, $uibModal) {

别忘了删除控制器末尾的']'

希望这有帮助！

未找到AngularJS uibModal依赖项

3 个答案: