参数 'fn' 不是一个有字符串的函数

Posted 2023-03-05

【中文标题】参数 \'fn\' 不是一个有字符串的函数

【英文标题】：Argument 'fn' is not a function got string参数 'fn' 不是一个有字符串的函数

【发布时间】：2013-10-06 08:52:46

【问题描述】：

我在我的 Angular 应用程序中绑定了一个控制器， 从那以后我得到了 Argument 'fn' is not a function 错误，任何人都可以查看我的代码并解释为什么我得到了那个错误吗？

我会非常感激:)

html-标记：

<section class="col-lg-12" data-ng-controller="MessageController">
  <fieldset>
    <legend> 'MESSAGES' | translate </legend>
  </fieldset>
  <div class="margin-left-15">
    <ul class="list-style-button">
      <li data-ng-repeat="message in MSG"> message </li>
    </ul>
  </div>
</section>

控制器：

(function() 
  'use strict';

  var controllers = angular.module('portal.controllers');

  controllers.controller('MessageController', ['$scope', 'MessageService', '$rootScope', function MessageController($scope, MessageService, $rootScope) 
    $rootScope.MSG = MessageService.getMessages();

    $rootScope.$watch('MSG', function(newValue) 
      $scope.MSG = newValue;
    );
  ]);
());

服务：

(function() 

  'use strict';

  var messageServices = angular.module('portal.services');

  messageServices.factory('MessageService', ['MessageData', 'localStorageService', 'UserService'], function(MessageData, localStorageService, UserService) 
    return new MessageService(MessageData, localStorageService, UserService);
  );

  function MessageService(MessageData, localStorageService, UserService) 
    this.messageData = MessageData;
    this.localStorageService = localStorageService;
    this.userService = UserService;
  

  MessageService.prototype.getMessages = function() 
    var locale = this.userService.getUserinfoLocale();
    var messages = this.localStorageService.get(Constants.key_messages + locale);
    if (messages !== null && messages !== undefined) 
      return JSON.parse(messages);
     else 
      return this.messageData.query(
        locale: locale
      , $.proxy(function(data, locale) 
        this.save(Constants.key_messages + locale, JSON.stringify(data));
      , this));
    
  ;

  MessageService.prototype.save = function(key, value) 
    this.localStorageService.add(key, value);
  ;

());

数据：

(function() 
  'use strict';

  var data = angular.module('portal.data');

  data.factory('MessageData', function($resource) 
    return $resource(Constants.url_messages, , 
      query: 
        method: 'GET',
        params: 
          locale: 'locale'
        ,
        isArray: true
      
    );
  );
());

html头中js文件的顺序：

<script src="js/lib/jquery-1.10.js"></script>
<script src="js/lib/angular.js"></script>
<script src="js/lib/angular-resource.js"></script>
<script src="js/lib/angular-translate.js"></script>
<script src="js/lib/angular-localstorage.js"></script>
<script src="js/lib/jquery-cookies.js"></script>
<script src="js/lib/bootstrap.js"></script>
<script src="js/portal.js"></script>

【问题讨论】：

可能与 jQuery 有关，例如当您使用 $.fn.extend(... 向 jQuery 添加插件时。也许你还没有包含 jQuery lib

jQuery 是我的 head 标签中添加的第一个脚本，我将按照 js 文件的顺序编辑问题

【参考方案1】：

我的情况

  let app: any = angular.module("ngCartosServiceWorker"),
    requires: any[] = [
      "$log",
      "$q",
      "$rootScope",
      "$window",
      "ngCartosServiceWorker.registration",
      PushNotification
    ];
  app.service("ngCartosServiceWorker.PushNotification");

我忘了添加需要数组作为参数来提供这样的服务

app.service("ngCartosServiceWorker.PushNotification", requires);

【参考方案2】：

我遇到了同样的问题，就我而言，问题出在 angular-cookies.js 文件上。它与其他 angularjs 脚本位于文件夹中，当我使用 gulp 缩小我的 js 文件时，发生了错误。

简单的解决方案是将 angular-cookies.js 文件放到另一个文件夹中，在所选文件夹之外以缩小 js 文件。

【参考方案3】：

以上答案极大地帮助我纠正了我在申请中遇到的由不同原因引起的相同问题。

在构建时，我的客户端应用程序正在被连接和缩小，所以我专门编写我的 Angular 以避免相关问题。我将我的config 定义如下

config.$inject = [];
function config() 
    // config stuff

（我定义了一个函数，$inject它作为一个模块并声明它是什么）。

然后我尝试注册config，就像我在我的应用程序中注册其他模块（控制器、指令等）一样。

angular.module("app").config('config', config); // this is bad!

// for example, this is right
angular.module("app").factory('mainService', mainService);

这是错误的，并给了我上述错误。于是我改成了

angular.module("app").config(config);

它奏效了。 我猜 Angular 开发人员打算 config 拥有一个单一实例，因此在注册 config 时让 Angular 不接受名称。

【讨论】：

Run方法也一样！非常感谢您分享这个！

【参考方案4】：

今天我犯了同样的错误，犯了那个愚蠢的错误：

(function()

  angular
    .module('mymodule')
    .factory('myFactory', 'myFactory');   // <-- silly mistake 

  myFactory.$inject = ['myDeps'];
  function myFactory(myDeps)
    ...
  

());

而不是那个：

(function()

  angular
    .module('mymodule')
    .factory('myFactory', myFactory);   // <-- right way to write it    

  myFactory.$inject = ['myDeps'];
  function myFactory(myDeps)
    ...
  

());

事实上，字符串“myFactory”被带入了等待函数而不是字符串的注入器。 这解释了 [ng:areq] 错误。

【参考方案5】：

问题在于使用“错误”语法来创建服务 而不是使用：

messageServices.factory('MessageService', 
    ['MessageData','localStorageService', 'UserService'], 
    function(MessageData, localStorageService, UserService)
        return new MessageService(MessageData, localStorageService, UserService);
    
);

我不得不使用：

messageServices.factory('MessageService', 
    ['MessageData','localStorageService', 'UserService', 
    function(MessageData, localStorageService, UserService)
        return new MessageService(MessageData, localStorageService, UserService);
    
]);

我很快就用参数关闭了数组，由于我还在学习我没有直接看到它，无论如何我希望我能帮助其他偶然发现这一点的人。

【讨论】：

这真的很讨厌。就我而言，我错误地将一项服务放在了方括号之外（所以所有的括号和括号都匹配得很好），我花了很长时间才弄清楚，因为我重构了很多代码。因此，再次，当您遇到类似以下内容时，您会收到同样无意义的错误消息：app.factory('x', 'y', ['z', function(y, z) ...]);（注意 y 在方括号之外）。最糟糕的是，它不会告诉你哪个文件有这个问题。因此，如果您更改了很多文件，请看图。

或config('someFactory', 'otherFactory', superFunction) 而不是config(['someFactory', 'otherFactory', superFunction])

在我的情况下，删除方括号中的依赖项名称会有所帮助。像这样.factory('historyentries', function($http) 而不是.factory('historyentries', ['$http'], function($http)

那些行不需要，如果你删除它，它会自动工作'MessageData','localStorageService', 'UserService'],