找不到AngularJS uibModal依賴項

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 個解決方案

解決方案1
3 已采納 2016-06-26 21:36:16

解決方案2
2 2016-06-26 22:07:18

解決方案3
1 2016-06-26 22:01:36

找不到AngularJS uibModal依賴項

問題描述

3 個解決方案

解決方案1 3 已采納 2016-06-26 21:36:16

解決方案2 2 2016-06-26 22:07:18

解決方案3 1 2016-06-26 22:01:36

解決方案1
3 已采納 2016-06-26 21:36:16

解決方案2
2 2016-06-26 22:07:18

解決方案3
1 2016-06-26 22:01:36