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

Posted 2023-02-22

【中文标题】控制器内部的 angular-ui-router 函数不是函数

【英文标题】：angular-ui-router function inside controller is not a function

【发布时间】：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。 感谢您的帮助。

【参考方案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: ...
        );