68

我在我的 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>
4

5 回答 5

162

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

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);
    }
]);

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

于 2013-09-30T14:02:20.933 回答
9

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

(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] 错误。

于 2015-09-17T12:28:09.610 回答
4

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

在构建时，我的客户端应用程序正在被连接和缩小，所以我专门编写我的 Angular 以避免相关问题。我将 my 定义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);

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

于 2016-09-24T20:37:47.633 回答
1

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

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

于 2016-11-03T20:02:54.853 回答
0

我的情况

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

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

app.service("ngCartosServiceWorker.PushNotification", requires);
于 2019-02-14T03:19:50.757 回答