web-dev-qa-db-ja.com

AngularJS遅延エラー：引数 'fn'は関数ではなく、オブジェクトを取得しました

ジョン・リンドクイストの多くのビデオに示されているように、ルートを変更する前にアプリにデータを収集させようとしています： http://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index = 4＆feature = plcp

私はそれをすべて接続しましたが、遅延オブジェクトが解決する時間になると、エラーが発生します：

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

私のコードは次のようになります。

ルート-

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

コントローラー-

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

実行時に、解決を実行し、DBFactoryリソースが戻り、戻ってきて、実際の「deferred.resolve（data）;」まですべてが機能します。ここで、上記のエラーが貼り付けられます。その1行をコメントアウトすると、もちろんページは表示されませんが、エラーも表示されません。

DBFactoryから返されるデータの内容はJSONオブジェクトであり、これは予想されるものであり、オンラインおよびビデオで見たすべての例に示されています。

使用して：

AngularJS 1.0.6

考え？ご助力いただきありがとうございます。

UPDATE：

私のルートを使用して、名前空間でコントローラを定義していたようです：

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

これを責めることでした。単に標準の関数宣言を使用する場合：

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

「関数の検索、オブジェクトの取得」エラーを満たします。奇妙なことは、オブジェクト「var DashboardCtrl = angular.module（ 'saApp'）。controller（）」として使用するように変更したこと、またはそれより前にyeomanジェネレーターから持っていたもので、angularjsドキュメントで指定しましたの：

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

次のルートで：

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

動作しません。

javascriptangularjsruntime-errorpromisedeferred
16
Phil Pastorek

私は何度もこのエラーを経験し、最終的に完璧でシンプルなソリューションを見つけました。コントローラの名前を 'when'構造に入れて、次のように引用符で囲みます。

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

の代わりに

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

工場でリンクするときに誤って余分な括弧を含めた場合にも発生します。

悪い：

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

良い：

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

これはコントローラーオブジェクトを返します。

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

しかし、ルートには実際のコントローラー機能が必要です。だから...これがあなたのコントローラーであり、解決すると仮定します:(コントローラーに「IndexCtrl」という名前を付けたことに注意してください...コードでそれをしていたとは思わない）

myApp = angular.module('myApp')

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

Have angular名前を渡すことでコントローラーを検索できます。コントローラーの参照は文字列であることに注意してください）

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

次のように{}を追加して別のファイルから「関数」をインポートすることで、この「fnは関数ではなく、オブジェクトを取得しました」を解決できました。

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

古い方法：

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

この問題を参照： https://github.com/swimlane/angular-data-table/issues/189

2
Milean

同じ問題がありました。以下を実行することで解決できます。

Routes.when（）メソッドからコントローラー宣言を削除します。したがって、この...

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

これだけになります...

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

スコープを維持するために、htmlテンプレートにコントローラー宣言を追加します。例えば..

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

または、誤ってこのような工場/コントローラーの名前の後に注入を行った場合（間違った方法）;

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

正しい方法;

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

CoffeescriptでKarmaを使用してモジュールをモックしているときにこのエラーが発生しました。

解決策は、（$ provide）->関数の最後に「return null」を追加することでした。それなしでは、coffeescriptは$ provide.value（）の結果を返しますが、これはオブジェクトであると推測されます。

例：

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

これは、Coffescript + angularjsを使用している場合にも発生します。

AngularjsはCoffescriptクラスをサポートしているため。

class IndexCtrl 
    constructor: () ->

myApp.controller('IndexCtrl',IndexCtrl)

その後、.when（）

「コントローラー：IndexCtrl」は、関数ではなくオブジェクトを認識します。

1
alphaadidas

コントローラーに定義されていない関数がhtmlにある場合にもこのエラーが発生します。

0
Abhishek Yadav