控制器内部的 angular-ui-router 函数不是函数答案

【问题标题】：angular-ui-router function inside controller is not a function控制器内部的 angular-ui-router 函数不是函数
【发布时间】：2017-05-05 18:37:15
【问题描述】：

我在一个状态中创建了一个控制器。我们通常使用 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, {}) 来摆脱它，如下所示：

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。感谢您的帮助。

【问题讨论】：

标签： javascript angularjs angular-ui-router angular-components

【解决方案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: ...
        });

【讨论】：