BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] コントローラをグローバルに定義しているときに、コントローラが関数ではなく、未定義になりました。

2022-02-11 13:38:06

質問

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 = ["[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>

解決方法は？

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のソースからのコメントです:-。

<ブロッククオート
  • で指定された名前のコントローラが登録されているかどうか確認します。 $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 ディレクティブを使用します。 html を使用することもできます。例: - ng-app="myApp"

  • すべてがうまくいっているにもかかわらず、問題が発生する場合は、スクリプトに正しいファイルが含まれているかどうかを確認することを忘れないでください。

  • 同じモジュールを別の場所で2回定義していませんか？その結果、同じモジュールで以前に定義されたエンティティがクリアされます。 angular.module('app',[]).controller(.. そしてまた別の場所で angular.module('app',[]).service(.. (もちろん両方のスクリプトが含まれています) は、以前に登録されたコントローラをモジュールの app は、2回目のモジュールの再作成でクリアされます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します