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,如需转载请自行联系原作者

目录
相关文章
优化Angularjs的$watch方法
Angularjs的$watch相信大家都知道,而且也经常使用,甚至,你还在为它的某些行为感到恼火。比如,一进入页面,它就会调用一次,我明明希望它在我初始化之后,值再次变动才调用。这种行为给我们带来许多麻烦。
2151 0
|
JavaScript 前端开发
|
JavaScript 前端开发 移动开发
|
JavaScript 前端开发 容器
|
索引 图形学