Controller not firing in AngularJS

Question

I'm having an odd issue in AngularJS where MainCtrl isn't fire at all. I go to localhost/ and it redirects to localhost/#/ but the page is blank. There are no errors/messages in console. I can confirm that /views/main.html is publicly accessible. I don't know why this isn't working. Am I missing anything?

angular.module('TurkApp', ['ngCookies']).config([
  '$routeProvider',
  function ($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: '/views/main.html',
      controller: 'MainCtrl'
    }).otherwise({ redirectTo: '/' });
  }
]);
  angular.module('TurkApp', []).controller('MainCtrl', [
    '$scope',
    '$http',
    '$location',
    '$cookies',
    function ($scope, $http, $location, $cookies) {
      $scope.questionIsLoading = true;
      $scope.answerButtonsDisabled = true;
      $scope.showHelp = false;
      $scope.currentRetries = 0;
      $scope.acceptedHit;
      $scope.currentQuestionText = null;
      $scope.currentQuestionID = null;
      var AssignmentID, Interest;
      var getInterest = function () {
        return $cookies.interest;
      };
      var getAssignmentID = function () {
        var qsRegex = new RegExp('(?:\\?|&)AssignmentID=(.*?)(?=&|$)', 'gi'), m, assignmentID = false;
        while ((match = qsRegex.exec(document.location.search)) != null) {
          assignmentID = match[1];
        }
        if (!assignmentID) {
          assignmentID = $location.search()['AssignmentID'];
        }
        $scope.acceptedHit = assignmentID == 'ASSIGNMENT_ID_NOT_AVAILABLE' || !assignmentID ? false : true;
        return assignmentID;
      };
      $scope.loadNextQuestion = function () {
        $scope.questionIsLoading = $scope.answerButtonsDisabled = true;
        $http.get('/workers/' + Interest + '/next-question').success(function (data, status) {
          $scope.currentQuestionText = data.text;
          $scope.currentQuestionID = data.id;
          $scope.questionIsLoading = $scope.answerButtonsDisabled = false;
        }).error(function () {
          console.log('Answer send failed');
        });
      };
      $scope.sendAnswer = function (answer) {
        if (!$scope.questionIsLoading && !$scope.answerButtonsDisabled) {
          $scope.questionIsLoading = $scope.answerButtonsDisabled = true;
          $http.post('/workers/' + Interest + '/answer-question', {
            question_id: $scope.currentQuestionID,
            question_text: $scope.currentQuestionText,
            answer: answer
          }).success(function (data, status) {
            $scope.loadNextQuestion();
          }).error(function () {
            console.log('Answer send failed');
          });
        }
      };
      $scope.toggleHelp = function () {
        $scope.showHelp = $scope.showHelp ? false : true;
      };
      var init = function () {
        AssignmentID = getAssignmentID();
        Interest = getInterest();
        $scope.loadNextQuestion();
      };
      init();
    }
  ]);

Mark Sherretta · Accepted Answer · 2013-09-11 21:11:15Z

4

You are creating the module 'TurkApp' twice, thereby losing the configuration registered with the first module:

angular.module('TurkApp', ['ngCookies'])

When you include the second parameter to the angular.module function, it creates the module. If you omit the second parameter, it assumes the modules exists and "extends" it.

Change:

angular.module('TurkApp', [])

to:

angular.module('TurkApp')

See the usage section here - http://docs.angularjs.org/api/angular.module

answered Sep 11, 2013 at 21:11

Mark Sherretta

10.3k4 gold badges40 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kylee Over a year ago

This did it. I only put it there debugging another issue just to have it bite me later.

m59 Over a year ago

@Kylee, Also note that you could (maybe should) be caching that reference rather than searching for the module each time: var myApp = angular.module('TurkApp', []); myApp.controller('MainCtrl', //etc

Kylee Over a year ago

Is that a large performance hit? I'm using the angular-generator with yeoman and that's how they generate controllers and didn't think about it honestly. I will try that out.

Collectives™ on Stack Overflow

Controller not firing in AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related