エラー：引数は関数ではなく、未定義です

120

Scala PlayでAngularJSを使用すると、このエラーが発生します。

エラー：引数「MainCtrl」は関数ではないため、定義されていません

曜日で構成されるテーブルを作成しようとしています。

私のコードを見てください。コントローラの名前を確認しましたが、それは正しいようです。注：このSO 回答から使用されるコード

index.scala.html

@(message: String)

@main("inTime") {

<!doctype html>
<html lang="en" ng-app>
    <head>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    </head>
<div ng-controller="MainCtrl">
    <table border="1">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td ngm-if="$first" rowspan="{{items.length}}">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>
</html> 
}

MainCtrl.js 

(function() {
    angular.module('[myApp]', []).controller('MainCtrl', function($scope) {
        $scope.data = {
            Colors: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
        }
    });
}());
angularjs  playframework 
— ケビン・メレディス
ソース
15
使用したhtmlではng-app次のように変更できますng-app=myApp
— Chandermani
同じエラーが発生しました@Chandermani
— Kevin Meredith
コードからクロージャ（IIFE）を削除してみましたか？この問題が発生したのは、JavaScriptでPHPエラーが発生したためです。
— Kevin Beal 2013
1
次のチェックリストで問題を見つけることができます：stackoverflow.com/a/26797874/930170
— Sergei Panfilov
MainCtrl.controller.jsがBundleConfig.csファイルに追加されているかどうかを確認します
— Syed Mohamed

回答:

107

[]モジュールの名前（[myApp]）からを削除します

angular.module('myApp', [])

そしてng-app="myApp"、htmlに追加すれば動作するはずです。

— チャンデルマニ
ソース
1
それを機能させるために私がしなければならなかったのは、2番目の提案（つまり、ng-app = "myApp"を設定する）だけでした。[]を削除すると、別のエラーが発生しました。
— Jason
15
2番目のパラメーター[]があることは、新しいモジュールを作成していることを示します。2番目のパラメーターを削除すると、既存のモジュールを取得することになります。したがって、チェックする1つの可能性はangular.module、2番目のパラメーターを含めて2回呼び出すかどうかです。その場合、2番目のオカレンスが2番目のオカレンスを上書きし、その時点までのコントローラーの定義をすべて非表示にします。
— カールG
26
彼が削除すると言うとき、彼は[]OPがの[myApp]代わりに持っている最初のパラメーターを参照していますmyApp。彼は2番目のパラメーターについて話していません。
— ケビンビール2013
1
ルートを使用している場合は、コントローラーの名前を確認してください。ルート定義のコントローラー名では、大文字と小文字が区別されます。
— Latin Warrior
78

最初。controllerルート定義に、定義しているコントローラー名と同じ かどうかを確認します

communityMod.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/members', {
        templateUrl: 'modules/community/views/members.html',
        controller: 'CommunityMembersCtrl'
      }).
      otherwise({
        redirectTo: '/members'
      });
  }]);

communityMod.controller('CommunityMembersCtrl', ['$scope',
    function ($scope) {
        $scope.name = 'Hello community';
    }]);

この例の異なるコントローラー名はエラーになりますが、この例は正しいです

2番目に、JavaScriptファイルをインポートしたかどうかを確認します。

<script src="modules/community/controllers/CommunityMembersCtrl.js"></script>

— プリロック
ソース
30
私の経験では、あなたの「2番目」が常に問題です。コントローラをインポートするのを忘れることが多いindex.html
— msanford '18 / 02/18
私の場合も2番目で、JSファイルをインポートするのを忘れていました...
— Saurabh Misra
26

同じエラーメッセージが表示されました（私の場合：「引数 'languageSelectorCtrl'は関数ではないため、未定義です」）。

Angularシードのコードとの面倒な比較の結果、以前にapp.jsのcontrollersモジュールへの参照を削除していたことがわかりました。（https://github.com/angular/angular-seed/blob/master/app/js/app.jsにスポットしてください）

だから私はこれを持っていました：

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.directives'])

これは失敗しました。

そして、欠けている参照を追加したとき：

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.controllers', 'MyApp.directives'])

エラーメッセージが表示されなくなり、Angularがコントローラを再びインスタンス化できるようになります。

— ベルトラン
ソース
同じ問題がありましたが、私の問題は、コントローラーをアプリモジュールに追加するのを忘れたことでした...なぜこれが自動的に行われないのですか？とにかくありがとう！
— TheZuck 2015年
16

このエラーは、htmlで指定された2つの ng-appディレクティブの結果である場合があります。私の場合、誤っng-appて私のhtmlタグと次のようなタグで指定しng-app="myApp"ましたbody：

<html ng-app>
  <body ng-app="myApp"></body>
</html>
— ガウラフ
ソース
1
myAppモジュールにインジェクションを追加しなかったときに起こりました。
— Ghandhikus
ありがとうございました！これで問題が解決しました。
— bradden_​​gross 16
6

これは私に4時間（SOでの無限の検索を含む）を真剣に受けましたが、ついにそれを見つけました。誤って（意図せずに）どこかにスペースを追加しました。

見つけられますか？

angular.module('bwshopper.signup').controller('SignupCtrl ', SignupCtrl);

だから... 4時間後、私はそれがそうあるべきだとわかりました：

angular.module('bwshopper.signup').controller('SignupCtrl', SignupCtrl);

肉眼だけではほとんど見えません。

これは、リビジョン管理（gitなど）とユニット/回帰テストの重要性を強調しています。

— レオ
ソース
1
私の答えは余分なスペースではありませんでしたが、それが私の解決につながりました。私はController代わりに持っていてcontroller、それはそれがとったすべてでした。
— Grandizer、2015年
そして、私は自分のファイルにoptions-moda.controller.jsという名前を付けましたが、options-modal.controller.js DOHを探していました！
— theFish 2018年
私がBundleConfigに.jsを追加するのを忘れたことが原因でした。シンプルですがイライラします。
— Ege Bayrak
4

私は同じ問題に遭遇しました、そして私の場合、それはこの問題の結果として起こっていました：

別のモジュール（「myApp.controllers」と呼ばれる）でコントローラーを定義し、次のようにメインアプリモジュール（「myApp」と呼ばれる）に注入しました。

angular.module('myApp', ['myApp.controllers'])

同僚が別のコントローラーモジュールを別のファイルにプッシュしましたが、私の名前とまったく同じ名前（つまり 'myApp.controllers'）で、このエラーが発生しました。Angularはそれらのコントローラーモジュール間で混乱したためだと思います。ただし、エラーメッセージは何が問題なのかを発見するのにあまり役に立ちませんでした。

— リラ・エリ
ソース
1
これは、モジュールの2番目のパラメーターを削除することで修正されます... 2番目のパラメーターなしでangular.module（ 'myApp'）を使用して既存のモジュールを取得するには。ie angular.module（ 'myApp'）。contoller（...）
— Santhosh
3

私の場合（概要ページと「追加」ページがある）、以下のようなルーティング設定でこれを取得しました。挿入できなかったAddCtrlのメッセージが表示されていました...

$routeProvider.
  when('/', {
    redirectTo: '/overview'
  }).      
  when('/overview', {
    templateUrl: 'partials/overview.html',
    controller: 'OverviewCtrl'
  }).
  when('/add', {
    templateUrl: 'partials/add.html',
    controller: 'AddCtrl'
  }).
  otherwise({
    redirectTo: '/overview'
  });

when('/'ルートが原因で、すべてのルートが概要に移動し、コントローラーは/ addルートページのレンダリングで照合できませんでした。add.htmlテンプレートをDIDで確認しましたが、そのコントローラーが見つからなかったため、これは混乱を招きました。

ケースがこの問題を修正したときに「/」ルートを削除しました。

— イーケイ
ソース
TFSビルドが失敗する原因となっていたため、このエラーも受け取り、髪を引きちぎっていました。'/'ルートをコメントアウトすることで修正されました。それでは、理由を理解してください！
— Phillip Copley
3

サブモジュールを使用している場合は、メインアプリでモジュールを宣言することを忘れないでください。すなわち：

<scrip>
angular.module('mainApp', ['subModule1', 'subModule2']);

angular.module('subModule1')
   .controller('MyController', ['$scope', function($scope) {
      $scope.moduleName = 'subModule1';
   }]);
</script>
...
<div ng-app="mainApp">
   <div ng-controller="MyController">
   <span ng-bind="moduleName"></span>
</div>

mainAppでsubModule1を宣言しない場合、 "[ng：areq]引数" MyController "は関数ではなく、未定義になります。

— 調整
ソース
2

Уmedの2番目のポイントは私の落とし穴でしたが、念のために言っておくと、どこかで誰かを助けているのかもしれません。

私も同じ問題を抱えていましたが、気が狂う前に、コントローラースクリプトを含めるのを忘れていたことがわかりました。

私のアプリはASP.Net MVCに基づいているので、App_Start / BundleConfig.csに次のスニペットを挿入することで、自分を正気に保つことにしました。

bundles.Add(new ScriptBundle("~/app").Include(
                "~/app/app.js",
                "~/app/controllers/*.js",
                "~/app/services/*.js" ));

とLayout.cshtml

<head>
...
   @Scripts.Render("~/app")
...
</head>

これで、ファイルを手動で含めることを二度と考える必要がなくなります。後から考えると、プロジェクトをセットアップするときにこれを実際に行うべきでした...

— Xceno
ソース
1

メインのindex.htmlで使用したLoginControllerでエラーが発生しました。私は解決する2つの方法を見つけました：

  1. $ controllerProvider.allowGlobals（）を設定すると、Angularの変更リストにそのコメントが見つかりました。 「このオプションは古いアプリの移行には便利かもしれませんが、新しいアプリでは使用しないでください！」Angularに関する元のコメント

    app.config（['$ controllerProvider'、function（$ controllerProvider）{$ controllerProvider.allowGlobals（）;}]）;

  2. コントローラの登録の間違ったコンストラクタ

前

LoginController.$inject = ['$rootScope', '$scope', '$location'];

今

app.controller('LoginController', ['$rootScope', '$scope', '$location', LoginController]);

「app」はapp.jsから取得

var MyApp = {};
var app = angular.module('MyApp ', ['app.services']);
var services = angular.module('app.services', ['ngResource', 'ngCookies', 'ngAnimate', 'ngRoute']);
— ドミトリアルガジン
ソース
1

私は大きな間違いで同じエラーがありました：

appFormid.controller('TreeEditStepControlsCtrl', [$scope, function($scope){

}]);

分かりますか ？最初の$ scopeの周りの ''を忘れました。正しい構文はもちろんです：

appFormid.controller('TreeEditStepControlsCtrl', ['$scope', function($scope){

}]);

すぐに表示されなかった最初のエラーは、「$ scope is not defined」であり、その後に「Error：[ng：areq] Argument 'TreeEditStepControlsCtrl' is not a function、got undefined」がありました。

— エロ
ソース
0

それはあなたのアセットを ""で囲むのと同じくらい簡単でしょうか？

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">

なる

<link rel="stylesheet" media="screen" href="@routes.Assets.at('stylesheets/main.css')">

それは解析でいくつかの問題を引き起こしている可能性があります

— ジェイ・トム
ソース
0

この問題を修正するには、Angularルートの宣言でコントローラーの名前のスペルを間違えたことを発見する必要がありました。

.when('/todo',{
            templateUrl: 'partials/todo.html',
            controller: 'TodoCtrl'
        })
— マッド物理学者
ソース
0

私の場合、それは単純なタイプミスでしたindex.html：

<script src="assets/javascript/controllers/questionssIndexController.js"></script>

それはあったはずです

<script src="assets/javascript/controllers/questionsIndexController.js"></script>

sコントローラの名前に余分なものはありません。

— エディ
ソース
0

ここでChromeを使用しているのは、ブラウザのキャッシュです。Inspect（Element）で「Disable cache」をチェックするだけで問題は解決しました。

— 郭偉輝
ソース
0

これは、「エラー：引数 ''は関数ではないため、未定義になった」という答えを見つけようとすると、Googleでポップアップ表示されるためです。

同じモジュールを2回作成しようとしている可能性があります。

angular.moduleは、AngularJSモジュールを作成、登録、取得するためのグローバルな場所です。

1つの引数を渡すと、既存のangular.Moduleが取得されますが、複数の引数 を渡すと、新しいangular.Moduleが作成されます。

ソース：https : //docs.angularjs.org/api/ng/function/angular.module#overview

例：

angular.module('myApp', []) 依存関係を挿入せずにモジュールを作成するために使用されます。

angular.module('myApp') （引数なし）は、既存のモジュールを取得するために使用されます。

— MCollard
ソース
0

エラーには多くの実際の原因があることを示唆する多くの実用的な解決策があるようです。

私の場合、コントローラを宣言していませんでしたapp/index.html：

<scipt src="src/controllers/controller-name.controller.js"></script>

エラーが発生しました。

— タイ・コンウェイ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.