Error: [ng:areq] Argument 'Controller' is not a function, got undefined

Question

While implementing a modal for dialog boxes I am getting Error: [ng:areq] Argument 'ModalInstanceCtrl' is not a function, got undefined. I have two controllers in the same .js file. The error shows up the name of the second controller.

ng-app is contained in main html file.

<div ng-app = "LoginApp">
  <div ng-view>
    <!-- partial will go here -->
  </div>
</div>

Angular routes

var LoginApp = angular.module('LoginApp', ['ngResource', 'ngRoute', 'ui.bootstrap'])
LoginApp.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {controller: LoginCtrl, templateUrl: '/js/templates/login.html'})
    .otherwise({redirectTo: '/'})
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });
})

LoginCtrl.js file

'use strict'

var LoginCtrl = ['$scope', '$modal', '$log', function($scope, $modal, $log) {
  $scope.authenticate = function(){

    var loginModal = $modal.open({
      templateUrl: 'login-modal.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        modalData: function () {
          return {
              user: {
                  name: '',
                  password: ''
              }
          };
        }
      }
    });

    loginModal.result.then(function (user) {
      $log.info("My name is:" + user.name);
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
  }
}];

var ModalInstanceCtrl = ['$scope', '$modalInstance', 'modalData', function($scope, $modalInstance, modalData){

}];

In the LoginCtrl.js file, LoginCtrl doesn't shows up this error but the declaration of ModalInstanceCtrl is undefined. Could anyone let me know why is this happening.

Buu Nguyen Buu Nguyen · Accepted Answer · 2014-11-10T02:36:37

In the param of $modal.open(), change from this:

...
controller: 'ModalInstanceCtrl',
...

To this:

...
controller: ModalInstanceCtrl,
...

Notice, no quotes for the name of the controller, because you want AngularJS to use the ModalInstanceCtrl variable, not a controller registered with angular.

Alternatively, if you want to keep the quotes, you can register ModalInstanceCtrl with AngularJS, like this:

LoginApp.controller('ModalInstanceCtrl',  ['$scope', '$modalInstance', 'modalData', function($scope, $modalInstance, modalData){
  ...
}]);

Either way will work.

Error: [ng:areq] Argument 'Controller' is not a function, got undefined

1 Answers