1.  点击事件

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

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

　　

Angularjs 事件指令的更多相关文章

  1. AngularJs ng-change事件/指令(转)

    from:http://blog.csdn.net/u011127019/article/details/52564111 定义和用法 ng-change 指令用于告诉 AngularJS 在 HTM ...

  2. AngularJS 事件

    AngularJS 有自己的 HTML 事件指令. ng-click指令: ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html& ...

  3. 带你走近AngularJS - 体验指令实例

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  4. 《AngularJS》--指令的相互调用

    转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...

  5. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  6. AngularJS1.X学习笔记4-内置事件指令及其他

    AngularJS为我们定义了一系列事件指令,方便我们对用户的操作作出响应.甚至他还有一个可选模块提供了触摸事件和手势事件的支持,为移动端开发提供了可能.现在开始学习一下AngularJS的事件指令. ...

  7. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  8. AngularJs HTML DOM、AngularJS 事件以及模块的学习（5）

    今天的基础就到了操作DOM,事件和模块的学习,其实我个人感觉学习起来AngularJS并没有想象中的那么的艰难,可能是因为这个太基础化吧,但是我们从初学开始就应该更加的自信一些,后来我可能会写一个小的 ...

  9. AngularJs:Directive指令用法

    摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...

随机推荐

  1. java连接MySql数据库 zeroDateTimeBehavior

    JAVA连接MySQL数据库,在操作值为0的timestamp类型时不能正确的处理,而是默认抛出一个异常, 就是所见的:java.sql.SQLException: Cannot convert va ...

  2. SSH 反向代理

    SSH反向代理 被控制端没有NAT或者没有静态公网IP,把本端一台服务器映射到外网给远端SSH进来,建立SSH反向隧道. 先映射本端机器到外网  nat server 2222to22 protoco ...

  3. Vue---vue-cli 中的proxyTable解决开发环境中的跨域问题

    使用vue+vue-cli+axios+element-ui开发后台管理系统时,遇到一个问题,后台给了一个接口,我这边用axios请求数据,控制台总是报405错误和跨域错误 错误 405? 没见过!! ...

  4. linux-网络使用

    linux网络的基本使用 "ifconfig" 查看已经被激活的网卡详细信息 "ifconfig eth0" 查看特定的网卡信息 [root@ssgao ~]# ...

  5. （转载）SAPI 包含sphelper.h编译错误解决方案

    [转]SAPI 包含sphelper.h编译错误解决方案 在使用Microsoft Speech SDK 5.1开发语音识别程序时,包含了头文件“sphelper.h”和库文件“sapi.lib”.编 ...

  6. oracle获取执行计划及优缺点 详解

    一.获取执行计划的6种方法(详细步骤已经在每个例子的开头注释部分说明了):1. explain plan for获取: 2. set autotrace on : 3. statistics_leve ...

  7. 团队项目之UML图设计

    团队 学号 姓名 本次作业博客链接 031602428 苏路明(组长) https://www.cnblogs.com/Sulumer/p/9822854.html 031602401 陈瀚霖 htt ...

  8. ztree树形菜单的增加删除修改和换图标

    首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂.造成这个现象是ztree树形菜单的历史遗留问题.大概是之前的版本没有增加这个功能,后来的版本加上了这个 ...

  9. UI基础:视图控制器.屏幕旋转.MVC 分类： iOS学习-UI 2015-07-02 22:21 62人阅读 评论(0) 收藏

    UIViewController 视图控制器,继承自UIResponder,作用:管理视图并且响应事件 功能: 1.分担APPdelegate的工作 2.实现模块独立,能提高复用性 创建UIViewC ...

  10. SSH项目搭建（五）——web.xml文件配置

    上一章写到pom.xml有一个报错,说找不到web.xml文件.确实是这样的,因为我们用maven搭建的web层里就是没有这个文件.我们能看到,webapp文件夹里是空的. 没有,就想办法把它弄出来. ...