Angular ui router undefined function in controller

Question

I have a ui route that looks like the following

.state('question', {
        url: '/question',
        templateUrl: 'views/templates/question.view.htm',
        controller: 'QuestionController',
        resolve: {
            questions_preload: function(Question) {
                return Question.query();
            }
        }
    });

The Question.query() function looks like

Question.query = function () {
            var deferred = $http.get(HATEOAS_URL);
            return SpringDataRestAdapter.processWithPromise(deferred).then(function (data) {
                Question.resources = data._resources("self");
                return _.map(data._embeddedItems, function (question) {
                    return new Question(question);
                });
            });
        };

and the controller that should have the questions preloaded at the start beings like this

angular.module('myapp').controller('QuestionController', function ($scope, Question) {

    $scope.questions = questions_preload;

Unfortunately while the Question.query() method runs correctly the questions_preload which I figured would house the array is undefined when the controller executes.

I believe it's something to do with the deferred in the query function? Would anyone have any idea?

Thanks, Mark.

Answer 1

You have to inject the questions_preload value into your controller:

angular.module('myapp')
.controller('QuestionController',
  function ($scope, Question, questions_preload) {
    ...
    $scope.questions = questions_preload;

As you had it you were simply accessing an undefined variable.

The use of a promise in Question.query() doesn't matter here as angular ui-router will wait until the promise has resolved before it instantiates your controller.