Аргумент 'fn' не является функцией полученной строки

У меня есть часть моего приложения angular, на которое я привязал контроллер,
с тех пор я получил аргумент "fn" не является функцией Error, может ли кто-нибудь просмотреть мой код и объяснить, почему я получил эту ошибку?

Я был бы очень благодарен:)

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

порядок js файлов в html-заголовке:

<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>

Ответы

Ответ 1

Проблема заключалась в использовании "неправильного" синтаксиса для создания сервиса
вместо использования:

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

Я скоро закрыл массив параметрами, и, поскольку я все еще участвую, я не видел его напрямую, так или иначе, я надеюсь, что смогу помочь другим, которые спотыкаются на это.

Ответ 2

Сегодня я получил такую же ошибку, совершая эту глупую ошибку:

(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].

Ответ 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 иметь уникальный экземпляр и поэтому иметь Angular не принимать имя при регистрации config.

Ответ 4

У меня была такая же проблема, и в моем случае проблема была в файле angular -cookies.js. Это было в папке с другими скриптами angularjs, и когда я использовал gulp для минимизации моих js файлов, произошла ошибка.

Простое решение состояло в том, чтобы поместить файл angular -cookies.js в другую папку за пределами выбранной папки, чтобы минимизировать js файлы.