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

123

angularjsを使用したサンプルアプリケーションを書いています。Chromeブラウザで以下のエラーが発生しました。

エラーは

エラー：[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 = ["abcd@gmail.com", "abcd@yahoo.co.in"];

            $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>
javascript  angularjs  angularjs-directive  angularjs-scope 
— yokks
ソース

回答:

172

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

例：-

angular.module('app', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

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

        };
    }]);

または

function ContactController($scope) {
    $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

    $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ソースからのコメントは次のとおりです。

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

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

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

  • 必ずng-app角度付きルート要素（例：-）にもappname in ディレクティブを配置してくださいhtml。例：-ng-app = "myApp"

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

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

— PSL
ソース
提案されているようにこれを確認するには？$ controllerProviderを介して、指定された名前のコントローラが登録されているかどうかを確認します
— geckob '25年
app.register.controller（ 'TheController'、TheController）; 私のためにトリックをしました。
— morph85 2015年
33

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

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

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

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

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

— ローグリーダー
ソース
1
+1興味深いことに、ビジュアルスタジオが呼び出しを自動的に削除することがあります。このコードを含む既存のjsファイルをコピーしました。オリジナルは呼び出しを持っていましたが、コピーされたファイルは持っていませんでした。
— papergodzilla 2016年
16

私はAngularの初心者であり、角度のあるルート要素にアプリ名を含めないという基本的な間違いをしました。したがって、コードを

<html data-ng-app>

に 

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

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

— プラカシュティワリ
ソース
8

私は違いを理解していなかったので、私はこのエラーを持っていたangular.module('myApp', [])としますangular.module('myApp')。

これにより、モジュール「myApp」が作成され、「myApp」という名前の既存のモジュールが上書きされます。

angular.module('myApp', [])

これは、既存のモジュール「myApp」を取得します。

angular.module('myApp')

上記の最初の呼び出しを使用して、別のファイルで自分のモジュールを上書きしていました。期待したとおりに取得するのではなく、別のモジュールを作成しました。

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

— ジェイク・スチュワート
ソース
1
私の場合、モジュールを追加し、コントローラーを追加しましたが、アプリのモジュールのリストにモジュールを追加するのを忘れていました。`angular.module（" app "、[HEREYOURMODULE] ...`
— トーマス
3

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

良い練習かどうかはわかりませんが、別の練習に役立つかもしれません。

var app = app;
if(!app) {
    app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);
— フランジ
ソース
2

私が誤って再宣言したとき、私はこの問題を抱えていましたmyApp：

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

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

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

— ダニエル・フリッパンス
ソース
2

ルートページに含まれている重要なスクリプトを見逃すだけで同じエラーが発生する可能性があることを除いて、本当に素晴らしいアドバイス

例：

ページ：index.html 

   np-app="saleApp"

行方不明

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

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

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

したがって、未定義のコントローラの問題は、コントローラを参照しないという偶発的な間違いで発生する可能性があります。

— トム・スティッケル
ソース
0

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

app.js

angular
.module('thisApp', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

        $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

他のすべてが失敗し、Gulpまたは類似のものを使用している場合は、再実行してください。

必要なのはズボンを素早く蹴るだけだったとき、私はすべてをチェックする30分の4人を無駄にしました。

— sigmapi13
ソース
0

ルート（高い確率）を使用していて、構成に依存関係として宣言されていないモジュール内のコントローラーへの参照がある場合、初期化も失敗する可能性があります。

たとえば、アプリにngRouteを設定しているとします。

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

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

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

secondModule「ngRoute」が問題を解決した後、依存関係として宣言します。私はこの問題があったことを知っています。

— H.Rabiee
ソース
0

コードと互換性のない古いバージョンのangularを使用していたため、このエラーが発生しました。

— ディーン・シャ
ソース
0

私の場合、このエラーの前に、IE11のリストのfindメソッドで構文エラーが発生しました。そのため、推奨されるように、findメソッドをフィルターメソッドに置き換えましたhttps://github.com/flrs/visavail/issues/19

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

— HydTechie
ソース
-3

AngularJS 1.4.3を使った古いチュートリアル（十分に古くない）を実行しているときにも、同じエラーが発生しました。はるかに簡単な解決策は、からangular.jsソースを編集することです

function $ControllerProvider() {
  var controllers = {},
      globals = false;

に

function $ControllerProvider() {
  var controllers = {},
      globals = true;

チュートリアルをそのまま実行するだけで、非推奨のグローバル関数はコントローラーとして機能します。

— MKaama
ソース
これは悪い習慣です。PSLの答えで述べたように、あなたはこの方法を行うことができますangular.module('app') .config(['$controllerProvider', function($controllerProvider) { $controllerProvider.allowGlobals(); }]);
— gm2008
-1。これは、（a）アップグレードするとすぐにこれを上書きすることを保証する優れた方法でもあります。これにより、「1.4.3から1.4.4にアップグレードするとアプリケーションが壊れました！」という不要な（そして正しくない）レポートが生成されます。または（b）「難しい」ためにアプリをアップグレードしない。
— Phillip Copley
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.