LP496 LP496 - 5 months ago 49
Javascript Question

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>

Answer

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');
  };
});

Comments