Angularjs 事件指令

简介:

1.  点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<! DOCTYPE  html>
< html >
< head >
     < meta  http-equiv="Content-Type" content="text/html; charset=utf-8" />
     < title >无标题文档</ title >
     < script  type="text/javascript" src="angular.min.js"></ script >
</ head >
< body >
< div  ng-app="myApp">
 
     < div  ng-controller="firstController">
         < div  ng-click="run()">点击</ div >
     </ div >
</ div >
< script  type="text/javascript">
     var app = angular.module("myApp", []);
     app.controller('firstController',function($scope){
         $scope.text='phonegap中文网';
 
         $scope.run=function(){
 
             alert('run');
             console.log('run');
         }
     });
</ script >
 
</ body >
</ html >

  

 

2. 样式 ng-class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<! DOCTYPE  html>
< html >
< head >
     < meta  http-equiv="Content-Type" content="text/html; charset=utf-8" />
     < title >无标题文档</ title >
     < script  type="text/javascript" src="angular.min.js"></ script >
     < style >
         .red{background:red;}
         .yellow{background:yellow;}
     </ style >
</ head >
< body >
< div  ng-app="myApp">
 
     < div  ng-controller="firstController">
         < div  ng-click="run()">点击</ div >
         < div  ng-class="{red:true}">{{text}}</ div >
     </ div >
</ div >
< script  type="text/javascript">
     var app = angular.module("myApp", []);
     app.controller('firstController',function($scope){
         $scope.text='phonegap中文网';
 
         $scope.run=function(){
 
             alert('run');
             console.log('run');
         }
     });
</ script >
 
</ body >
</ html >

  


本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/p/7137758.html,如需转载请自行联系原作者

目录
相关文章
|
4月前
|
JavaScript
AngularJS中的自定义指令:创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中,可以创建自定义指令,如示例中的`myCustomDirective`。指令的属性(如`restrict`、`template`、`replace`)和方法(如`link`、`scope`)可定制其行为。在HTML中使用`restrict`指定的方式(如元素、属性等)来插入指令。遵循命名规范,避免直接DOM操作,使用隔离作用域和关注重用性与扩展性,能有效提升代码质量。自定义指令是AngularJS强大功能之一,有助于实现复杂DOM操作和组件复用。
优化Angularjs的$watch方法
Angularjs的$watch相信大家都知道,而且也经常使用,甚至,你还在为它的某些行为感到恼火。比如,一进入页面,它就会调用一次,我明明希望它在我初始化之后,值再次变动才调用。这种行为给我们带来许多麻烦。
2141 0
|
JavaScript 前端开发
|
JavaScript 前端开发 移动开发
|
JavaScript 前端开发 容器
|
索引 图形学