CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
user3179929
user3179929

Reputation: 41

Angular UI - using $modal in my service DI makes $modal as undefined

In the latest AngularJS and UI-Bootstrap, my below code injects $modal but it is undefined. Note, that if I inject $modal into a controller, it works great.

Can anyone suggest why the DI fails to init the $modal in my below service?

angular.module ( 'geRbAuthenticationModule', ['ui.bootstrap'])
.factory ('geRbAuthenticationService',  // service name
  [
    '$timeout',             // dependencies
    '$http',
    '$q',
    '$modal',
    function ( $scope, $timeout, $http, $q, $modal  ) {

      BUG here:  $modal is UNDEFINED

     '
     '
     '

Thank you.

Upvotes: 0

Views: 1073

Answers (1)

KayakDave
KayakDave

Reputation: 24676

You're missing the string "$scope" dependency in your string list. So change:

['$timeout','$http','$q','$modal',
function ( $scope, $timeout, $http, $q, $modal  ) {

to: 

['$scope','$timeout','$http','$q','$modal',
function ( $scope, $timeout, $http, $q, $modal  ) {

The reason $modal is failing is because it's last in the list. Right now timeout is going into scope, http into timeout, etc until undefined goes into $modal.

This is such an easy mistake to make that some folks drop the list of strings from their code and use ngmin in their grunt script. ngmin then automatically deals with the minifier issue this form is meant to solve. This allows you to not worry about matching up string names to parameters:

.factory ('geRbAuthenticationService',  // service name
    function ( $scope, $timeout, $http, $q, $modal  ) {

Upvotes: 1

Related Questions