angular-ui-controller里面的router函数不是一个函数

Question

我在一个状态中创建了一个控制器。我们通常将这种表示法用于 angular (1.5) 组件和服务，并带有 angular.extend(self, {}).

我的问题是 self.criteria 初始化时，浏览器调用 self.getAgencies() 和 return 异常：

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

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

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: ...
        });

angular-ui-controller里面的router函数不是一个函数

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

javascript

angularjs

angular-ui-router

angular-components