未捕獲的ReferenceError：未定義的角度 - AngularJS不工作

我試圖學習角度，我正在努力與一個簡單的按鈕單擊。
我跟着一個具有與下面相同的代碼的例子。未捕獲的ReferenceError：未定義的角度 - AngularJS不工作

我正在尋找的結果是按鈕單擊以導致警報。但是，沒有響應按鈕點擊。有人有任何想法嗎？

<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>

來源

2014-01-29 Calgar99

難道是由角引起您的自定義腳本後，被調入呢？ – jfelsinger

如果你得到標題中給出的錯誤，那麼甚至沒有按鈕可以點擊。 – Mawg

您需要將列入角庫下方的角應用代碼。當您的角碼運行時，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，但我相信這個練習的要點是隻是練習書寫簡單的指令，這樣纔有意義。

來源

2014-01-29 19:10:15 m59

@ m59。除了你留下的東西，他還需要添加ng-app指令來初始化angularjs。看到我的js-fiddle代碼低於 – zszep

@ŽeljkoSzep吧？他已經有了'ng-app'指令。它在他的代碼的第一行。 – m59

@ m59。真是個大錯。我只將身體部分從他的代碼複製到js-fiddle中，因爲它已經包含了html標記，所以我錯過了ng-app指令。抱歉。我刪除了我的答案。 – zszep

使用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。

更新：您還希望<script>塊之前加載角庫。

來源

2014-01-29 19:10:31 jkinkead

@ m59說 - 你首先需要角庫。 :) – jkinkead

只是爲了補充m59's correct answer，這裏是一個工作jsfiddle：

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

</body>

來源

2014-01-29 19:32:02 zszep

你的演示鏈接不工作 –

似乎jsfiddle的傢伙刪除了我的代碼片段， – zszep

未捕獲的ReferenceError：未定義的角度 - AngularJS不工作

回答

相關問題