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.

Duncan · Accepted Answer · 2016-03-17 16:26:25Z

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.

answered Mar 17, 2016 at 16:26

Duncan

96.4k15 gold badges129 silver badges160 bronze badges

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

4 Comments

Mark Gargan Over a year ago

Sorry I did see that I hadn't injected that earlier and amended but still I just get Error: [$injector:unpr] Unknown provider: questions_preloadProvider <- questions_preload <- QuestionController Thanks for the response though Duncan

Duncan Over a year ago

Are you sure you aren't trying to instantiate the controller elsewhere? e.g. directly from your html. You should be able to inject that value when instantiated by ui-router but it wouldn't be available at other times. (Just guessing here, otherwise I can't see why you would get that error)

Mark Gargan Over a year ago

Awesome Duncan!! I had no idea that the ui.router was instantiating the controller and that the ng-controller I had was also instantiating another controller. How do I mark this as the answer??

Mark Gargan Over a year ago

Ah my bad I had removed the 'return' before the _map in the service so the map containing the questions was being created but being lost because it wasn't being returned. Works perfectly now! Thank you for your help Duncan.

Collectives™ on Stack Overflow

Angular ui router undefined function in controller

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related