Javascript 未捕获引用错误：未定义角度-AngularJS不工作_Javascript_Angularjs_Button_Angularjs Directive

Javascript 未捕获引用错误：未定义角度-AngularJS不工作

javascript angularjs button

Javascript 未捕获引用错误：未定义角度-AngularJS不工作,javascript,angularjs,button,angularjs-directive,Javascript,Angularjs,Button,Angularjs Directive,我正在尝试学习angular，我正在努力用一个简单的按钮点击。我遵循了一个与下面代码相同的示例我要查找的结果是，单击按钮会引起警报。但是，没有对按钮单击的响应。有人有什么想法吗 <html lang="en" ng-app="myApp" > <head> <meta charset="utf-8"> <title>My AngularJS App</title> <link rel="stylesheet" hr

我正在尝试学习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>


我的AngularJS应用程序
点击我！
var-app=angular.module（'myApp'，[]）；
app.directive（'myDirective'，function（）{
返回函数（范围、元素、属性）{
bind（'click'，function（）{alert（'click'）}）；
};
});
{{2+3}}

您需要将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>

{{2+3}
var-app=angular.module（'myApp'，[]）；
app.directive（'myDirective'，function（）{
返回函数（范围、元素、属性）{
bind（'click'，function（）{alert（'click'）}）；
};
});

为完整起见，您的指令确实与现有指令类似，但我相信本练习的重点只是练习编写简单指令，这样才有意义。

使用

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'); };
  };
};

点击我！
//在：
app.directive（'myDirective'函数（）{
返回函数（范围、元素、属性）{
scope.alertFn=function（）{alert（'click'）；}；
};
};

注意，在本例中，您不需要

my指令

，只需要在当前作用域上绑定

alertFn

更新：您还希望在

块之前加载角度库。

为了补充，这里有一个工作：


点击我！
{{2+3}}

如您所知

angular.module

（在angular.js文件下声明。因此，在访问angular.module之前，您必须使用

（在您的情况下）使其可用，然后您可以调用

angular.module

。它将工作

像


我的AngularJS应用程序
var-app=angular.module（'myApp'，[]）；
app.directive（'myDirective'，function（）{
返回函数（范围、元素、属性）{
bind（'click'，function（）{alert（'click'）}）；
};
});
点击我！
{{2+3}}

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

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

这可能是由于在自定义脚本之后加载angular造成的吗？如果您得到标题中给出的错误，那么甚至没有按钮可点击。还有@m59所说的-您首先需要angular库。：）@m59.除了你留下的指令外，他还必须添加ng app指令来初始化angularjs。看到@eljkoSzep下面我的js fiddle代码了吗？他已经有了

ng app

指令。它在他的代码的第一行。@m59.真是个错误。我只把他的代码中的主体部分复制到了js fiddle中，因为它已经包含了html标记，所以我错了我用ng应用程序指令删除了这一行。对不起，我删除了我的答案。看来JSFIDLE的人删除了我的代码片段，

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

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