CODEWITHSUNDEEP
javascriptangularjs
LP45
LP45

Reputation: 303

AngularJS uibModal dependency not found

I am having a problem with injecting the uibModal dependency in my app.js:

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

I keep getting this error:

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>

Upvotes: 1

Views: 1765

Answers (3)

LP45
LP45

Reputation: 303

To anyone who needs help with this using the versions:

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

In your main index.html include the scripts. You only need 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>

Upvotes: 2

Revln9
Revln9

Reputation: 847

first of all you have two controllers doing the same thing .when you can simply have one but in this case it's not the problem just a bad design.

try rewriting your first controller so instead of this

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

do this :

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

dont forget to remove the ']' at the end of the controller

hope this helps !

Upvotes: 1

mokarakaya
mokarakaya

Reputation: 723

You also need ui-bootstrap-tpls for modal.

Upvotes: 3

Related Questions