Cal*_*r99 48 javascript button angularjs angularjs-directive
我正在尝试学习角度,我正在努力点击一个简单的按钮.
我按照一个示例,它具有与下面相同的代码.
我正在寻找的结果是单击按钮以引发警报.但是,按钮单击没有响应.有人有什么想法吗？
<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>
m59*_*m59 73
您需要将角度应用程序代码移动到包含角度库的下方.在你的角度代码运行时,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,但我相信这个练习的目的只是练习编写简单的指令,这是有道理的.
使用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>块之前加载角度库.
| 归档时间： |
|
| 查看次数： |
190373 次 |
| 最近记录： |