web-dev-qa-db-fra.com

Erreur de report AngularJS: l'argument 'fn' n'est pas une fonction, a obtenu un objet

J'essaie de faire en sorte que mon application collecte les données avant de modifier l'itinéraire, comme le montrent de nombreuses vidéos de John Lindquist: http://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index=4&feature= plcp

J'ai tout connecté, mais quand il est temps que l'objet différé se résolve, j'obtiens l'erreur:

Error: Argument 'fn' is not a function, got Object
at assertArg (http://localhost:9000/components/angular/angular.js:1019:11)
at assertArgFn (http://localhost:9000/components/angular/angular.js:1029:3)
at annotate (http://localhost:9000/components/angular/angular.js:2350:5)
at invoke (http://localhost:9000/components/angular/angular.js:2833:21)
at Object.instantiate (http://localhost:9000/components/angular/angular.js:2874:23)
at http://localhost:9000/components/angular/angular.js:4759:24
at <error: illegal access>
at Object.Scope.$broadcast (http://localhost:9000/components/angular/angular.js:8261:28)
at http://localhost:9000/components/angular/angular.js:7417:26
at wrappedCallback (http://localhost:9000/components/angular/angular.js:6797:59) angular.js:5704

Mon code ressemble à ceci:

Route -

angular.module( 'saApp' )
.config( function ( $routeProvider, $locationProvider ) {
    $routeProvider
        .when( '/dashboard', {
            templateUrl: 'views/dashboard/dashboard.html',
            controller: Dashboard,
            resolve: Dashboard.resolve
        } 
});

manette -

var Dashboard = angular.module( 'saApp' ).controller(
    function ( $scope, dataset ) {
            $scope.data = dataset;
    } );

Dashboard.resolve = {
  dataset: function ( $q, DBFactory ) {

    console.log("dataset enter")
    var deferred = $q.defer();

    DBFactory.get( {noun: "dashboard"},
        function ( data ) {
            console.log("resolving");
            deferred.resolve( data );
        } );

    console.log("promise");
    return deferred.promise;
  }
}

Lors de l'exécution, il exécute la résolution, la ressource DBFactory va, revient et tout fonctionne jusqu'à ce que le "deferred.resolve (data);" c'est là que j'obtiens l'erreur collée ci-dessus. Si je commente cette ligne, bien sûr, je n'ai pas de page, mais je n'ai pas non plus d'erreur.

Le contenu des données, revenant de DBFactory est un objet JSON, ce qui est attendu, et montré dans tous les exemples que j'ai vus en ligne et dans les vidéos.

en utilisant:

AngularJS 1.0.6

Pensées? Merci pour votre aide.

MISE À JOUR:

Il semble que j'utilisais mes routes et définissais le contrôleur avec l'espace de noms:

var Dashboard = angular.module( 'saApp' ).controller()

était à blâmer pour cela. Lorsque j'utilise simplement une déclaration de fonction standard:

function DashboardCtrl($scope, dataset) {
  $scope.data = dataset;
}

il satisfait l'erreur "recherche de fonction, objet obtenu". La chose étrange était que je l'ai changé pour l'utiliser comme un objet "var DashboardCtrl = angular.module ('saApp'). Controller ()" ou même ce que je l'avais avant le générateur yeoman, et spécifié dans les documents angularjs de:

angular.module( 'saApp' )
.controller( 'DashboardCtrl', function ( $scope, dataset ) {});

avec un itinéraire de:

.when( '/dashboard', {
            templateUrl: 'views/dashboard/dashboard.html',
            controller: 'DashboardCtrl'
        } )

ne fonctionnerait pas.

javascriptangularjsruntime-errorpromisedeferred
16
Phil Pastorek

J'ai eu cette erreur plusieurs fois et j'ai finalement trouvé la solution parfaite et simple. Mettez simplement le nom de votre contrôleur dans la construction "quand" entre guillemets comme ceci:

.when( '/dashboard', {
    templateUrl: 'views/dashboard/dashboard.html',
    controller: 'Dashboard',
    resolve: Dashboard.resolve
}

au lieu de

.when( '/dashboard', {
    templateUrl: 'views/dashboard/dashboard.html',
    controller: Dashboard,
    resolve: Dashboard.resolve
}
8
Kath

Cela se produira également si vous incluez accidentellement des parenthèses supplémentaires lorsque vous créez un lien dans votre usine:

MAL:

myModule.factory('monkey', ['$http', MonkeyFactory()]);

BIEN:

myModule.factory('monkey', ['$http', MonkeyFactory]);
4
Peter Hollingsworth

Cela renvoie l'objet contrôleur:

var myCtrl = myApp.controller('whatever'...

Mais route veut la fonction de contrôleur réelle. Donc .... en supposant que c'est votre contrôleur et résolvez: (remarquez que j'ai nommé le contrôleur 'IndexCtrl' ... je ne pense pas que vous faisiez cela dans votre code)

myApp = angular.module('myApp')

var IndexCtrl = myApp.controller('IndexCtrl', function($scope){ 
   .. blah blah... 
})
IndexCtrl.resolve = {
  loadData:function(){ ... blah blah... }
}

Vous pouvez avoir angular recherchez le contrôleur en passant le nom. (Notez que la référence du contrôleur est une chaîne)

.when('/',{controller:'IndexCtrl', resolve:IndexCtrl.resolve})
4
Nawlbergs

J'ai pu résoudre ce problème "fn n'est pas une fonction, objet obtenu" en important ma "fonction" à partir d'un autre fichier en ajoutant {} comme ceci:

import {MenuCtrl} from './controllers/MenuCtrl.js';

ancienne façon:

import MenuCtrl from './controllers/MenuCtrl.js';

Référencé ce problème: https://github.com/swimlane/angular-data-table/issues/189

2
Milean

J'ai eu le même problème. Vous pouvez le résoudre en procédant comme suit.

Supprimez la déclaration du contrôleur de la méthode routes .when (). Donc ça...

.when( '/dashboard', {
        templateUrl: 'views/dashboard/dashboard.html',
        controller: Dashboard,
        resolve: Dashboard.resolve
    }

devient juste ça ...

 .when( '/dashboard', {
        templateUrl: 'views/dashboard/dashboard.html',
        resolve: Dashboard.resolve
    }

Maintenant, pour conserver votre portée, ajoutez la déclaration du contrôleur dans votre modèle html. Par exemple..

<div ng-controller="DashboardCtrl">{{Some fancy dashboard stuff}}</div>
2
Charlie Martin

Ou si vous avez fait par erreur l'injection après le nom de l'usine/du contrôleur comme ceci (dans le mauvais sens);

angular.module('MyModule')
    .factory('MyFactory', 'AnotherFactory', ['$http', function($http, AnotherFactory){
        // CODE HERE
    }]);

Le droit chemin;

angular.module('MyModule')
    .factory('MyFactory', ['$http', 'AnotherFactory', function($http, AnotherFactory){
        // CODE HERE
    }]);
2
JW_

J'ai eu cette erreur lors de la simulation de module avec Karma dans Coffeescript.

La solution consistait à ajouter "return null" à la fin de la fonction ($ provide) ->. Sans cela, coffeescript retournera le résultat de $ provide.value (), qui, je suppose, est un objet, ce qui provoque en quelque sorte "'fn n'est pas une fonction".

Exemple:

module 'myModule', ($provide)->
  $provide.value 'myInjectable',
    myFunction:-> return "dummy value"
  return null # prevents "fn is not a function"
2
Nick Perkins

Cela se produira également si vous utilisez Coffescript + angularjs.

Depuis angularjs prend en charge les classes Coffescript.

class IndexCtrl 
    constructor: () ->

myApp.controller('IndexCtrl',IndexCtrl)

puis dans le .when ()

le "contrôleur: IndexCtrl" voit un objet, pas une fonction.

1
alphaadidas

Nous obtenons également cette erreur lorsque nous avons une fonction en html qui n'est pas définie dans le contrôleur.

0
Abhishek Yadav