web-dev-qa-db-ja.com

エラー：引数は関数ではありません。未定義です

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"]
        }
    });
}());
angularjsplayframework
118
Kevin Meredith

Moduleの名前（[myApp]）から[]を削除します

angular.module('myApp', [])

そしてhtmlにng-app="myApp"を追加すればうまくいきます。

105
Chandermani

FIRST。ルート定義に正しい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';
    }]);

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

SECOND JavaScriptファイルをインポートしたかどうかを確認してください。

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

77
pleerock

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

Angular seedのコードと少し比較すると、以前に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がコントローラを再度インスタンス化する可能性があります。

26
bertrand

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

<html ng-app>
  <body ng-app="myApp"></body>
</html>
16
Gaurav

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

あなたはそれを見つけることができますか？

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

それで…4時間後に私はそれがあるべきであることがわかりました：

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

肉眼だけでは見ることはほとんど不可能です。

これは、リビジョン管理（gitなど）および単体/回帰テストの重要性を強調しています。

6
leo

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

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

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

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

4
Lilla Eli

私の場合（概要ページと「追加」ページがあります）、以下のようなルーティング設定でこれを得ました。挿入できなかった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 routeページのレンダリングで一致することができませんでした。私はDIDがadd.htmlテンプレートを参照していますが、そのコントローラが見つからないため、混乱を招きました。

場合によっては '/'ルートを削除することで問題が解決しました。

3
EeKay

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

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

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

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

2
Xceno

私はメインのindex.htmlで使っていたLoginControllerで正当なエラーを受けました。解決方法は2つあります。

  1. $ controllerProvider.allowGlobals（）を設定して、Angular change-list "のコメントは古いアプリを移行するのに便利かもしれませんが、新しいアプリでは使わないでくださいものだ！」 Angularについての最初のコメント

    app.config（['$ controllerProvider'、関数（$ 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
Dmitri Algazin

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

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

}]);

分かりますか ？私は最初の$スコープのまわりの ''を忘れていました、正しい構文はもちろんです：

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

}]);

私がすぐには見えなかった最初のエラーは次のとおりでした： "$スコープは定義されていません"、続いて "エラー：[ng：areq]引数 'TreeEditStepControlsCtrl'は関数ではない未定義 "

1
Elo

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

.when('/todo',{
            templateUrl: 'partials/todo.html',
            controller: 'TodoCtrl'
        })
0
MadPhysicist

あなたのアセットを ""で囲むのと同じくらい簡単で、内側に ''を付けて引用符を付ける必要があるものは何でもありますか？

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

ここでChromeを使っているのは、ブラウザのキャッシュだとわかった。単にInspect（Element）の下の "Disable cache"をチェックして私の問題を解決した。

0
Weihui Guo