web-dev-qa-db-ja.com

コントローラは関数ではなく、未定義になりましたが、コントローラをグローバルに定義しています

私はangularjsを使ったサンプルアプリケーションを書いています。私はクロムブラウザで下記のエラーが出ました。

エラーは

エラー：[ng：areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined =

どちらとしてレンダリング

引数 'ContactController'は関数ではなく、未定義になりました

コード

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="../angular.min.js"></script>
    <script type="text/javascript">
        function ContactController($scope) {
            $scope.contacts = ["[email protected]", "[email protected]"];

            $scope.add = function() {
                $scope.contacts.Push($scope.newcontact);
                $scope.newcontact = "";                 
            };
        }    
    </script>    
</head>

<body>    
    <h1>  modules sample </h1>

    <div ng-controller="ContactController">
        Email:<input type="text" ng-model="newcontact">
        <button ng-click="add()">Add</button>

        <h2> Contacts </h2>
        <ul>
            <li ng-repeat="contact in contacts"> {{contact}} </li>
        </ul>    
    </div>
</body> 
</html>
javascriptangularjsangularjs-directiveangularjs-scope
121
yokks

Angular 1.3+を使用すると、グローバルスコープでグローバルコントローラ宣言を使用できなくなります（明示的な登録なし）。 module.controller構文を使ってコントローラを登録する必要があります。

例： - 

angular.module('app', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["[email protected]", "[email protected]"];

        $scope.add = function() {
            $scope.contacts.Push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

または

function ContactController($scope) {
    $scope.contacts = ["[email protected]", "[email protected]"];

    $scope.add = function() {
        $scope.contacts.Push($scope.newcontact);
        $scope.newcontact = "";
    };
}
ContactController.$inject = ['$scope'];
angular.module('app', []).controller('ContactController', ContactController);

これは重大な変更ですが、 allowGlobalsを使用することでグローバルを使用するように無効にすることができます 。

例： - 

angular.module('app')
    .config(['$controllerProvider', function($controllerProvider) {
        $controllerProvider.allowGlobals();
    }]);

これがAngular sourceからのコメントです： -

  • 指定された名前のコントローラが$controllerProviderで登録されているかどうかを確認してください
  • 現在のスコープで文字列を評価するとコンストラクタが返されるかどうかを確認します。
  • $ controllerProvider＃allowGlobalsの場合は、グローバルwindowオブジェクトのwindow[constructor]を確認します（推奨されません）。
 .....

expression = controllers.hasOwnProperty(constructor)
            ? controllers[constructor]
            : getter(locals.$scope, constructor, true) ||
                (globals ? getter($window, constructor, true) : undefined);

いくつかの追加チェック： -

  • 必ず、appnameを必ず角のルート要素のng-appディレクティブに入れてください（例： - html）。例： - ng-app = "myApp"

  • すべて問題なく、問題が解決しない場合は、スクリプトに正しいファイルが含まれていることを確認してください。

  • 異なる場所で同じモジュールを2回定義していないため、同じモジュール上で以前に定義されたエンティティ、例angular.module('app',[]).controller(..、および別の場所angular.module('app',[]).service(..（両方のスクリプトを含むもちろん）は、appというモジュールに以前に登録されていたコントローラを2回目のmoduleの再作成でクリアすることができます。

172
PSL

この問題は、コントローラー定義ファイルをクロージャーでラップしたために発生しました。

(function() {
   ...stuff...
});

しかし、実際にそのクロージャを呼び出してその定義コードを実行し、実際に私のコントローラが存在していたことをJavascriptに伝えるのを忘れていました。すなわち、上記は以下である必要があります。

(function() {
   ...stuff...
})();

最後の（）に注意してください。

33
rogueleaderr

私はAngularの初心者で、アプリ名をangle root要素に含めないという基本的な間違いをしました。そのため、コードを

<html data-ng-app>

に

<html data-ng-app="myApp">

私のために働いた。 @PSLは、これを上記の彼の答えですでにカバーしています。

16
Prakash Tiwari

angular.module('myApp', [])とangular.module('myApp')の違いが理解できなかったので、このエラーがありました。

これはモジュール 'myApp'を作成し、 'myApp'という名前の既存のモジュールを上書きします。

angular.module('myApp', [])

これは既存のモジュール 'myApp'を取り出します。

angular.module('myApp')

思ったように取得するのではなく、上の最初の呼び出しを使用して別のモジュールを作成し、別のファイルでモジュールを上書きしていました。

詳細はこちら： https://docs.angularjs.org/guide/module

8
Jake Stewart

Angular 1.3.3に移行したところ、appがオーバーライドされたときに複数のコントローラが異なるファイルにあり、最初に宣言されたコンテナがなくなったことがわかりました。

それが良い習慣かどうかはわかりませんが、他の方法に役立つことがあります。

var app = app;
if(!app) {
    app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);
3
Franzi

誤ってmyAppを再宣言したときにこの問題が発生しました。

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller1', ...);

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller2', ...);

再宣言後、Controller1は動作を停止し、OPエラーを発生させます。

2
Daniel Flippance

SAMEエラーがあなたのルートページにインクルードされた重要なスクリプトを見逃すことによって単に発生する可能性があることを除いて、本当に素晴らしいアドバイス

例：

ページ：index.html

   np-app="saleApp"

行方不明

<script src="./ordersController.js"></script>

Routeがどのコントローラとビューを提供するかを指示されたとき：

 .when('/orders/:customerId', {
     controller: 'OrdersController',
     templateUrl: 'views/orders.html'
 })

非常に重要な未定義のコントローラの問題は、偶然にもコントローラを参照していないという誤ったミスで発生する可能性があります。

1
Tom Stickel

他のすべてが失敗し、あなたがGulpか何かに似たものを使っているなら...ただそれを再実行してください！

私が必要としているのがズボンのSwiftのキックだけだったとき私は30分四倍のすべてをチェックすることを無駄にした。

0
sigmapi13

もしあなたがルートを使っていて（高い確率で）そしてあなたの設定が依存関係として宣言されていないモジュール内のコントローラへの参照を持っているなら、初期化も失敗するかもしれません。

たとえば、次のように、自分のアプリにngRouteを設定したとします

angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });

ルートを宣言するブロックに注意してください。

.when('/resourcePath', { 
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});

'ngRoute'が問題を解決したらsecondModuleを依存関係として宣言してください。私は私がこの問題を抱えていたことを知っています。

0
H.Rabiee

これらのエラーは、私の場合はlist.find（）関数の構文エラーの前に発生しました。リストの 'find'メソッドはIE11によって認識されないので、IE11とchromeの両方で機能するFilterメソッドに置き換える必要があります。参照してください https://github.com/flrs/visavail/issues/19

0
HydTechie

私は自分のコードと互換性がない角度の古いバージョンを使用していたので、私はこのエラーを得ていました。

0
Dean Sha

私の場合、このエラーはIE11のリストのfindメソッドで構文エラーが先行しています。そのため、推奨されるようにfindメソッドをfilterメソッドに置き換えました https://github.com/flrs/visavail/issues/19

その後、上記のコントローラが定義されていないエラーが解決されました。

0
HydTechie

このエラーは、多数のモジュールを含む大規模プロジェクトがあるときにも発生する可能性があります。 Angularファイルで使用されているアプリ（モジュール）が、テンプレートで使用されているものと同じであることを確認してください。この例では "thisApp"です。

app.js

angular
.module('thisApp', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["[email protected]", "[email protected]"];

        $scope.add = function() {
            $scope.contacts.Push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

index.html

  <html>
    <body ng-app='thisApp' ng-controller='ContactController>
         ...
        <script type="text/javascript" src="assets/js/angular.js"></script>
        <script src="app.js"></script>
    </body>
    </html>
0
Patrick