未捕获的 ReferenceError:角度未定义 - AngularJS 不工作 [英] Uncaught ReferenceError: angular is not defined - AngularJS not working
问题描述
我正在尝试学习 angular，但我在点击简单的按钮时遇到了困难.
我遵循了一个示例，该示例与下面的代码具有相同的代码.
我正在寻找的结果是按钮点击引起警报.但是，单击按钮没有响应.有人有任何想法吗?
<身体><div ><button my-directive>点击我！</button><脚本>var app = angular.module('myApp',[]);app.directive('myDirective',function(){返回函数(范围，元素，属性){element.bind('click',function() {alert('click')});};});<h1>{{2+3}}</h1><!-- 在生产中使用:<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></html>
您需要将 Angular 应用程序代码移动到包含 Angular 库的下方.在您的 angular 代码运行时， angular 尚不存在.这是一个错误(请参阅您的开发工具控制台).
在这一行:
var app = angular.module(`您正试图访问一个名为 angular 的变量.考虑是什么导致该变量存在.这是在 angular.js 脚本中找到的，然后必须首先包含该脚本.
{{2+3}}
<!-- 在生产中使用:<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><脚本>var app = angular.module('myApp',[]);app.directive('myDirective',function(){返回函数(范围，元素，属性){element.bind('click',function() {alert('click')});};});为了完整起见，您的指令确实类似于已经存在的指令 ng-click，但我相信这个练习的重点只是练习编写简单的指令，所以这是有道理的.
I'm attempting to learn angular and I am struggling with a simple button click.
I followed an example which has an identical code to the one 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.
这篇关于未捕获的 ReferenceError:角度未定义 - AngularJS 不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
