web-dev-qa-db-de.com

Das Argument 'fn' ist keine Funktion, die eine Zeichenfolge hat

Ich habe einen Teil in meiner Winkelanwendung, an den ich einen Controller gebunden habe.
seitdem bekam ich das Argument 'fn' ist keine Funktion Fehler. Kann jemand meinen Code ansehen und erklären, warum ich diesen Fehler habe?

Ich wäre sehr dankbar :)

hTML-Markup:

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

regler:

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

Bedienung:

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

}());

daten:

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

reihenfolge der Js-Dateien in HTML-Kopf:

<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>
63
J.Pip

Das Problem bestand darin, den Dienst mit der 'falschen' Syntax zu erstellen 
statt zu verwenden:

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

Ich musste verwenden:

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

Ich habe das Array mit Parametern bald geschlossen und da ich immer noch lerne, habe ich es nicht direkt gesehen, jedenfalls hoffe ich, dass ich anderen helfen kann, die darauf stoßen.

152
J.Pip

Heute habe ich den gleichen Fehler bei diesem dummen Fehler gemacht:

(function(){

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

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

}());

stattdessen: 

(function(){

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

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

}());

Tatsächlich wurde der String "myFactory" in den Injektor gebracht, der auf eine Funktion wartete und nicht auf einen String. Das erklärte den [ng: areq] -Fehler. 

9

Die obigen Antworten haben mir sehr geholfen, das gleiche Problem zu beheben, das ich in meiner Bewerbung hatte, aus einem anderen Grund.

Zur Zeit wird meine Client-App verkettet und minimiert. Daher schreibe ich mein Angular speziell, um verwandte Probleme zu vermeiden. Ich definiere meine config wie folgt

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

(Ich definiere eine Funktion, $inject es als Modul und erkläre, was es ist).

Und dann habe ich versucht, die config so zu registrieren, wie ich andere Module in meiner App (Controller, Anweisungen usw.) registriert habe.

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

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

Das ist falsch und hat mir den oben genannten Fehler gegeben. Also wechselte ich zu 

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

Und es hat funktioniert ... Ich denke, dass die Winkel-Devs beabsichtigten, config eine singuläre Instanz zu haben, und damit Angular keinen Namen akzeptiert, wenn config registriert ist.

4
svarog

Ich hatte das gleiche Problem und in meinem Fall lag das Problem bei der Datei angle-cookies.js. Es befand sich in einem Ordner mit anderen anglejs-Skripts und als ich gulp verwendet habe, um meine js-Dateien zu minimieren, trat der Fehler auf. 

Eine einfache Lösung bestand darin, die Datei angle-cookies.js in einem anderen Ordner außerhalb des ausgewählten Ordners abzulegen, um die js-Dateien zu minimieren.

1
Münich

Mein Fall 

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

Ich habe vergessen, erfordert Array als Parameter für diesen Service hinzuzufügen

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