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

93

同じ質問がここで何度か尋ねられたことに気付いたので、試してみましたが解決しませんでした。

私はこのチュートリアルをeggheadビデオでフォローしています。

しかし、「コントローラー」および「コントローラー間でのデータの共有」のセクションに到達すると、それを機能させることができません。

Chromeで実行すると、コンソールに次のエラーが表示されます。

「引数「FirstCtrl」は関数ではないため、未定義です」

何が悪いのか本当にわかりません。コードはチュートリアルのものと同じです。

HTML

<!DOCTYPE html>
<html ng-app>
 <head>
    <title>AngularJS Tutorials: Controllers</title>
    <link rel="stylesheet" href="mystyle.css">
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
 </head>
 <body>
    <div ng-app="">
       <div ng-controller="FirstCtrl">   
           <h1> {{data.message + " world"}}</h1>

           <div class="{{data.message}}">
               Wrap me in a foundation component
           </div>
       </div>
    </div>
    <script type="text/javascript" src="main.js"></script>
 </body>
</html>

main.js

function FirstCtrl($scope){
   $scope.data = { message: "Hello" };
}

javascript angularjs

— プンバ
ソース

ここでは第二のコメント内の溶液がある- stackoverflow.com/questions/24894870/...

— カンチャン

108

ng-appHTMLに2つの名前のないディレクティブがあります。
あなたのdivの1つを失います。

更新
別のアプローチを試してみましょう。
jsファイルでモジュールを定義し、それにng-appディレクティブを割り当てます。その後、単純な関数としてではなく、ngコンポーネントのようにコントローラーを定義します。

<div ng-app="myAppName">  
<!-- or what's the root node of your angular app -->

そしてjs部分：

angular.module('myAppName', [])
    .controller('FirstCtrl', function($scope) {
         $scope.data = {message: 'Hello'};
    });

これはまさにそれをしているオンラインデモです：http : //jsfiddle.net/FssbL/1/

— gion_13
ソース

残念ながら、同じエラーが発生します。divからng-app = ""を失いましたが、それでも機能しません。

— Pumba 2013年

1

手伝ってくれてどうもありがとう！私はそれをもう理解していません。こことオンラインデモで示したのとまったく同じことを行いましたが、「FirstCtrl」は未定義であると表示されます。次のチュートリアルでも同じ問題が発生するため、最初からやり直します。うまくいけばうまくいきます。

— Pumba 2013年

すごい！！できます。jsファイルのスクリプトタグのtype属性を閉じるのを忘れました。そして、それを2番目のソリューションと組み合わせることで機能しました！ありがとうございます:)）

— 2013年

6

デモビデオは、モジュール内のコントローラーをラップしません。それで、なぜそれは彼のために機能しますが、私にとっては機能しませんか？egghead.io/lessons/angularjs-controllers

— Demodave 14

2

@Demodave、私は同じ質問があります。ビデオはAngularJSの以前のバージョンで記録されたため、コントローラーの定義はそれほど厳密ではない可能性があります（ただし、これは私の仮定にすぎません。誰かが確認または拒否して

— もらえれ

93

私はまったく同じエラーメッセージを受け取りましたが、私の場合、index.htmlにコントローラーJSファイル（たとえば、first-ctrl.js）をリストしていないことがわかりました

— マリウス
ソース

1

コントローラーのjsファイルをリストしなかったとはどういう意味ですか？あなたはそれを含まなかったと言っていますか？

— Demodave 14

@DavidStoneはい-それは当時私のケースでした。

— Mariusz 14

別のnoobエラー：コントローラーのルージュ括弧などにより、同じタイプのエラーがコンソールに表示されることがあります。

— user2938649 16

9

私はこのチュートリアルを実行し、@ gion_13の回答に従いました。それでも動作しませんでした。インデックス内のng-app名を私のjsファイル内のものと同じにすることで解決しました。引用符も完全に同一。そう：

<div ng-app="myapp">
    <div ng-controller="FirstCtrl">

そしてjs：

 angular.module("myapp", [])
.controller('FirstCtrl',function($scope) {
    $scope.data= {message:"hello"};
  });

ng-appが同一でなければならないのは奇妙ですが、ng-controllerは同一ではありません。

— an1waukoni
ソース

これには4時間かかりました;（、最後にそれを理解するのを手伝ってくれてありがとう

— ダウラーズ

7

に名前を付けてng-app、アプリに名前空間を与える必要があります。単に使用するだけng-app では不十分です。

の代わりに：

<html ng-app>
...

代わりに次のようなものが必要になります。

<html ng-app="app">
...

次に、そのように：

var app = angular.module("app", []).controller("ActionsController", function($scope){});

— ユーザー1429980
ソース

5

もう1つの良いもの：誤ってモジュールを再定義します。今日は少し早めにコピー/貼り付けて、どこかでモジュール定義を作成しましたが、コントローラー定義で上書きしました。

// controllers.js - dependencies in one place, perfectly fine
angular.module('my.controllers', [/* dependencies */]);

次に、私の定義では、次のように参照することになっています。

// SomeCtrl.js - grab the module, add the controller
angular.module('my.controllers')
 .controller('SomeCtrl', function() { /* ... */ });

私が代わりにしたことは、

// Do not try this at home!

// SomeCtrl.js
angular.module('my.controllers', []) // <-- redefined module, no harm done yet
  .controller('SomeCtrl', function() { /* ... */ });

// SomeOtherCtrl.js
angular.module('my.controllers', []) // <-- redefined module - SomeCtrl no longer accessible
  .controller('SomeOtherCtrl', function() { /* ... */ });

への呼び出しの余分な括弧に注意してくださいangular.module。

— マイケルジェス
ソース

3

からng-app = ""を削除

<div ng-app="">

そして単にそれを作る

<div>

— ジョンスミス
ソース

3

アプリの設定でルーティングを使用する場合は、htmlでng-controllerを使用しないようにしてください。代わりにng-viewが必要です。コントローラは通常、ルーティングのビューとともに定義されます。

— マーク

1

私も同じ問題に直面しました。しかし問題は、ng-appが依存するモジュールのリストにモジュールをリストするのを忘れていたことでした。

3

これはコメントではなく、回答である必要があります。

— アンソニーペロー2015

1

私はこの問題に直面し、次の方法で修正しました：

最初にng-appを以下から削除します：
```
<html ng-app>
```
ng-appの名前をmyAppに追加します。
```
<div ng-app="myApp">
```

関数の前に次のコード行を追加します。

angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

スクリプトの最終的な外観：

angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

function FirstCtrl($scope){
    $scope.data = {message: "Hello"};
}

— アズハル
ソース

1

私の場合、このメッセージはメインモジュールでの依存関係の注入を忘れたことから来ています

— トーマス・ゴバート
ソース

1

これは、角度のあるアプリコードを複数回追加するように誤って構成されている場合に発生する可能性があります。私の場合、これはindex.jsにあり、コントローラー宣言の前後にjsファイル（gulpで展開）のディレクトリの一部として追加されていました。index.jsが縮小されないように除外を追加し、2回目に注入すると、アプリが機能し始めました。上記の解決策のいずれかで問題が解決しない場合の別のヒント。

— rncrtr
ソース

1

まず、モジュール名が定義されていない場合、JSでは、モジュールにアクセスしてコントローラーをリンクできません。

角度モジュールにモジュール名を提供する必要があります。定義モジュールの使用にも違いがあります。1。angular.module（ "firstModule"、[]）2. angular.module（ "firstModule"）

1-1つ目は、2番目の引数に依存関係を追加せずに新しいモジュール「firstModule」を宣言することです。2-これは、どこかで初期化された「firstModule」を使用することであり、初期化されたモジュールを取得して変更を加えようとしています。

— エシャーン・クマール
ソース

0

この問題に直面しましたが、コントローラの名前を変更することでこの問題を修正できました。試してみてください。

ctrlSub.execSummaryDocuments = function(){};

— アメイ・クルカルニ
ソース

0

関数内のコードの構文に何か問題があると、このエラーがスローされることがあります。機能を正しく確認してください。私の場合、Jsonフィールドに値を割り当てようとしていて、等号の代わりにコロンを使用していたときに発生しました= ...

— アミテシュ・ランジャン
ソース

0

2つの異なるJavaScriptファイルで定義された同じ名前の2つのコントローラーがありました。Angularを苛立たせると、名前空間の競合を示す明確なエラーメッセージを表示できません。

— thebiggestlebowski
ソース

0

このチュートリアルについてはわかりませんが、ファイルをgrunt / gulpの最小化プロセスに含めるのを忘れたときにも同じ問題が発生しました。

grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js']
      }
    }
  }
});

お役に立てば幸いです。

— パトリック・ベゴ
ソース

0

大文字と小文字の区別にも注意してください。私はこのバグを追いかけて良い時間を過ごしました。

<section id="forgotpwd" ng-controller="ForgotPwdController">

コントローラに名前を付けている間

angular
    .module('app')
    .controller('ForgotpwdController', ForgotpwdController);

これらはすべて一貫した名前にする必要があります。この場合は、小文字のpのp wdControllerを忘れました。

— ジェソン・マルタジャヤ
ソース