angular-ui-router function inside controller is not a function

Question

I created a controller inside a state. We usually use this kind of notation for our angular (1.5) components and services with an angular.extend(self, {}).

My problem here is when self.criteria is being initialized, the browser call self.getAgencies() and return an exception :

Error: self.getAgencies is not a function

(function (app) {
    'use strict';

    app.config(function ($stateProvider) {
        $stateProvider.state('app.invoice', {
            url: '/invoice'
            abstract: true,
            template: '<ui-view></ui-view>'
        })
        .state('app.invoice.list', {
            url: '/list?allMyParam',
            template: '<invoices criteria="$ctrl.criteria"></invoices>',
            controllerAs: '$ctrl',
            controller: function ($location) {
                var self = this;

                angular.extend(self,{
                    criteria: {
                        agencies: self.getAgencies()
                    },
                    getAgencies: function () {
                        if ($location.search().agencies) {
                            return undefined;
                        } else {
                            return ['foo', 'blah'];
                        }
                    }
                });
            }
        });
    });
})(angular.module('module', []));

I put getAgencies() function over the criteria prototype initialization but it did not change anything.

I got out of it by moving getAgencies() outside of angular.extend(self, {}) like this :

var self = this;

var getAgencies = function () {
    if ($location.search().agencies) {
        return undefined;
    } else {
        return ['foo', 'blah'];
    }
}

angular.extend(self, {
    criteria: {
        agencies: getAgencies()
    }
});

My code is working so it is ok for me but I would like to understand why my self.getAgencies() is not working when this call inside a controller component works well, and make it better if I can.

I'm using angular-ui-router 0.2.18 with angular 1.5.0. Thank you for your help.

Answer 1

Because when this code is reached

criteria: {
   agencies: self.getAgencies()
},

the angular.extend function has not been called yet, and there is no reason why self should contain the getAgencies function.

Why not initialize the agencies afterwards?

            angular.extend(self,{
                criteria: { },
                getAgencies: function () {
                    if ($location.search().agencies) {
                        return undefined;
                    } else {
                        return ['foo', 'blah'];
                    }
                }
            });

            self.criteria.agencies = self.getAgencies();

Alternatively, you could use a getter and post-pone calling the function:

        angular.extend(self,{
            criteria: { 
              get agencies() {
                if (!self._agencies) { 
                  self._agencies = self.getAgencies();
                }
                return self._agencies;
              }
            },
            getAgencies: ...
        });