BinaryDevelop
  1. ホーム
  2. javascript

[解決済み】Uncaught ReferenceError: angular is not defined - AngularJSが動作しない。

2022-01-20 05:05:27

質問

angularを学ぼうとしているのですが、簡単なボタンクリックに苦戦しています。
私は以下のコードと同じコードを持つサンプルに従いました。

私が求めている結果は、ボタンをクリックするとアラートが発生することです。しかし、ボタンをクリックしても何の反応もありません。どなたかアイデアをお持ちの方はいらっしゃいますか？ 

<html lang="en" ng-app="myApp" >
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
    <div >
        <button my-directive>Click Me!</button>
    </div>

    <script>
        var app = angular.module('myApp',[]);

        app.directive('myDirective',function(){

            return function(scope, element,attrs) {
                element.bind('click',function() {alert('click')});
            };

        });
    </script>

    <h1>{{2+3}}</h1>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

解決方法は？

angularアプリのコードをangularライブラリのインクルードより下に移動させる必要があります。あなたのアンギュラーコードが実行された時点で angular はまだ存在しません。これはエラーです（開発ツールのコンソールを参照してください）。

この行の中に 

var app = angular.module(`

という変数にアクセスしようとしています。 angular . その変数が存在する原因を考えてみましょう。それはangular.jsスクリプトの中にあり、最初にインクルードする必要があります。 

  <h1>{{2+3}}</h1>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

      <script>
        var app = angular.module('myApp',[]);

        app.directive('myDirective',function(){

            return function(scope, element,attrs) {
                element.bind('click',function() {alert('click')});
            };

        });
    </script>

完全を期すために、このディレクティブは既に存在するディレクティブである ng-click しかし、この演習の目的は、簡単なディレクティブを書く練習をすることだと思うので、それはそれで意味があると思います。

関連

最新

おすすめ

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