CODEWITHSUNDEEP
javascriptangularjs
user5041486
user5041486

Reputation:

Angular Injector Error for $modal

I am trying to create a modal using the $modal dependency in ui.bootstrap. I am calling the $modal.open({...}) method from the ng-click="showModal() in the second li element in the ul with the class nav-list.

Although when I run this index.html below using bracket I get an error saying:

Error: [$injector:unpr]
http://errors.angularjs.org/1.5.7/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20ModalController

Here is an overview of the code (I am extremely sorry that it is so long!):

Here is my index.html code below:

<html lang="en">
    <head>
        <title>App</title>

        <script src="../vendors/js/angular.min.js"></script>
        <script src="../vendors/js/ui-bootstrap-tpls-1.3.3.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()">Login</a></li>
                    </ul>
                </div>
            </nav>
         </header>
    </body>
</html>

This is my app.js:

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

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',
            resolve: {}
        });
    };
}]);

app.controller('newModalController', function($scope, $uibModalInstance) {
    $scope.test = "Testing";
});

Now this is my template (which is passed in the templateURL key for the $modal.open({...}) method):

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

        <script src="../resources/js/app.js"></script>
    </head>

    <body ng-app="App" ng-controller="newModalController">
        <div class="container">
            <div class="col-sm-8 col-sm-offset-2"> 
                <form name="userForm" ng-submit="submitToFB(userForm.$valid)" novalidate>
                    <div class="form-group">
                        <label><span class="glyphicon glyphicon-user"></span> Email</label>
                        <input type="text" name="email" class="form-control" ng-model="email" placeholder="Email" required>
                    </div>

                    <div class="form-group">
                        <label><span class="glyphicon glyphicon-eye-open"></span> Password</label>
                        <input type="text" name="password" class="form-control" ng-model="password" placeholder="Enter Password" required>
                    </div>

                    <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
                </form>
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Views: 1485

Answers (1)

AranS
AranS

Reputation: 1891

ui-bootstrap modal service, with which you open and control modals is called $uibModal. replace your $modal with this.

Here is ui-bootstrap example for modals:

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

Update: the modal instance template (login-modal.html) should contain only the body content with a root <div>, no need for script tags in component template.

Upvotes: 3

Related Questions