web-dev-qa-db-ja.com

キャッチされないReferenceError：angularが定義されていません-AngularJSが機能していません

私は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>
javascriptangularjsbuttonangularjs-directive
47
Calgar99

angularアプリコードを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に似ていますが、この演習の目的は単純なディレクティブの作成を練習することだけであると考えています。

72
m59

ng-clickディレクティブを使用します。

<button my-directive ng-click="alertFn()">Click Me!</button>

// In <script>:
app.directive('myDirective' function() {
  return function(scope, element, attrs) {
    scope.alertFn = function() { alert('click'); };
  };
};

この例ではmy-directiveは必要なく、現在のスコープでalertFnをバインドするために何かが必要なことに注意してください。

更新：angularライブラリも<script>ブロックの前にロードする必要があります。

5
jkinkead

m59の正解 を補完するために、ここに jsfiddle があります：

<body ng-app='myApp'>
    <div>
        <button my-directive>Click Me!</button>
    </div>
     <h1>{{2+3}}</h1>

</body>
3
zszep

問題が解決した後、HTMLコードに以下の行を追加するのを忘れました。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
0
saigopi

angular.module（angle.jsファイルで宣言されていることを知っているので、angular.moduleにアクセスする前に、<script src="lib/angular/angular.js"></script>（あなたの場合）を使用して使用可能にしておく必要があります。その後、angular.moduleを呼び出すことができます。

好む

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
<!-- 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>
</head>
<body ng-app="myApp">
    <div >
        <button my-directive>Click Me!</button>
    </div>
    <h1>{{2+3}}</h1>

</body>
</html>
0
Brajesh