未捕获的 ReferenceError：未定义角度 - AngularJS 不工作答案

【问题标题】：Uncaught ReferenceError: angular is not defined - AngularJS not working未捕获的 ReferenceError：未定义角度 - AngularJS 不工作
【发布时间】：2014-02-21 19:11:52
【问题描述】：

我正在尝试学习 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 导致的？
如果你得到标题中给出的错误，那么甚至没有按钮可以点击。

标签： javascript angularjs button angularjs-directive

【解决方案1】：

您需要将 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 相似，但我相信这个练习的目的只是练习编写简单的指令，所以这是有道理的。

【讨论】：

@m59。除了你留下来，他还得添加 ng-app 指令来初始化 angularjs。请参阅下面的 js-fiddle 代码
@ŽeljkoSzep 嗯？他已经有了ng-app 指令。它在他的代码的第一行。
@m59。真是个大错。我只将他代码中的正文部分复制到 js-fiddle 中，因为它已经包含 html 标记，所以我错过了 ng-app 指令的行。对不起。我删除了我的答案。

【解决方案2】：

使用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> 块之前加载角度库。

【讨论】：

@m59 所说的 - 你首先需要 Angular 库。 :)

【解决方案3】：

只是为了补充m59's correct answer，这是一个有效的jsfiddle：

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

</body>

【讨论】：

似乎来自 jsfiddle 的人删除了我的代码 sn-p，

【解决方案4】：

如您所知 angular.module( 在 angular.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>

【讨论】：

【解决方案5】：

在我添加问题解决后，我忘记在我的 HTML 代码中添加以下行。

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

【讨论】：