未捕获的Ref​​erenceError:角没有定义 - AngularJS不工作 [英] Uncaught ReferenceError: angular is not defined - AngularJS not working

查看:196
本文介绍了未捕获的Ref​​erenceError:角没有定义 - AngularJS不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图学习的角度,我用一个简单的按钮点击挣扎。我跟着它下面有相同的code的例子。我寻找的结果是点击按钮引起警报。但是,现在的按钮点击没有反应。没有任何人有什么想法?

 < HTML LANG =ENNG-应用=对myApp>
< HEAD>
  <间的charset =UTF-8>
  <标题>我AngularJS应用< /标题>
  <链接rel =stylesheet属性HREF =CSS / app.css/>
< /头>
<身体GT;
    < D​​IV>
        <我的按钮,指令>点击ME<!/按钮>
    < / DIV>    <脚本>
        VAR应用= angular.module('对myApp',[]);        app.directive('myDirective',函数(){            返回功能(范围,元素,ATTRS){
                element.bind('点击',功能(){警报('点击')});
            };        });
    < / SCRIPT>    &所述; H1> {{2 + 3}}&下; / H1>  < - 在生产中使用!
  &LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js\"></script>
   - &GT;
  &所述; SCRIPT SRC =LIB /角度/ angular.js&GT;&下; /脚本&GT;
  &所述; SCRIPT SRC =LIB /角度/角route.js&GT;&下; /脚本&GT;
  &LT;脚本SRC =JS / app.js&GT;&LT; / SCRIPT&GT;
  &LT;脚本SRC =JS / services.js&GT;&LT; / SCRIPT&GT;
  &LT;脚本SRC =JS / controllers.js&GT;&LT; / SCRIPT&GT;
  &LT;脚本SRC =JS / filters.js&GT;&LT; / SCRIPT&GT;
  &LT;脚本SRC =JS / directives.js&GT;&LT; / SCRIPT&GT;
&LT; /身体GT;
&LT; / HTML&GT;


解决方案

您需要将您的角度应用code列入角库下方。当时你的角度code运行时,还不存在。这是一个错误(请参阅您的开发工具的控制台)。

在这一行:

  VAR应用= angular.module(`

您试图访问一个名为角度变量。考虑是什么原因导致该变量存在。这是接下来必须首先列入angular.js脚本中。

 &LT; H1&GT; {{2 + 3}}&LT; / H1&GT;  &LT;  - 在生产中使用!
  &LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js\"></script>
   - &GT;
  &所述; SCRIPT SRC =LIB /角度/ angular.js&GT;&下; /脚本&GT;
  &所述; SCRIPT SRC =LIB /角度/角route.js&GT;&下; /脚本&GT;
  &LT;脚本SRC =JS / app.js&GT;&LT; / SCRIPT&GT;
  &LT;脚本SRC =JS / services.js&GT;&LT; / SCRIPT&GT;
  &LT;脚本SRC =JS / controllers.js&GT;&LT; / SCRIPT&GT;
  &LT;脚本SRC =JS / filters.js&GT;&LT; / SCRIPT&GT;
  &LT;脚本SRC =JS / directives.js&GT;&LT; / SCRIPT&GT;      &LT;脚本&GT;
        VAR应用= angular.module('对myApp',[]);        app.directive('myDirective',函数(){            返回功能(范围,元素,ATTRS){
                element.bind('点击',功能(){警报('点击')});
            };        });
    &LT; / SCRIPT&GT;

有关完整性,这是事实,你的指令类似于现有的指令 NG-点击,但我相信这个练习的要点是只是练习书写简单指令,这样才有意义。

I'm attempting to learn angular and I am struggling with a simple button click. I followed an example which has identical code as below. The result I am looking for is for the button click to cause an alert. However there is no response to the button click. Does anybody have any ideas?

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

解决方案

You need to move your angular app code below the inclusion of the angular libraries. At the time your angular code runs, angular does not exist yet. This is an error (see your dev tools console).

In this line:

var app = angular.module(`

you are attempting to access a variable called angular. Consider what causes that variable to exist. That is found in the angular.js script which must then be included first.

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

For completeness, it is true that your directive is similar to the already existing directive ng-click, but I believe the point of this exercise is just to practice writing simple directives, so that makes sense.

这篇关于未捕获的Ref​​erenceError:角没有定义 - AngularJS不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆