控制器內部的angular-ui-router函數不是函數

Question

我在狀態內創建了一個控制器。 通常，我們對帶有angular.extend(self, {}) angular（1.5）組件和服務使用這種表示法。

我的問題是在初始化self.criteria時，瀏覽器調用self.getAgencies()並返回異常：

錯誤：self.getAgencies不是函數

(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', []));

我將getAgencies（）函數放在標准原型初始化上，但沒有任何改變。

我通過將getAgencies() angular.extend(self, {})之外來angular.extend(self, {})這種情況：

var self = this;

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

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

我的代碼可以正常工作，但是對我來說還可以，但是我想了解為什么當控制器組件內的此調用工作正常時，為什么我的self.getAgencies()無法正常工作，如果可以的話，請使其變得更好。

我正在使用angular-ui-router 0.2.18和angular 1.5.0。 謝謝您的幫助。

Answer 1

因為到達此代碼時

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

angular.extend函數尚未被調用，並且沒有理由為何self應該包含getAgencies函數。

為什么不隨后初始化代理？

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

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

另外，您可以使用getter和post-pone調用該函數：

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