AngularJS基础 ng-mouseover 指令简单示例

更新时间：2016年08月02日 14:57:47 投稿：lqh

本文主要介绍AngularJS ng-mouseover 指令,这里帮大家整理了AngularJS 指令的基础知识,并附代码示例,有兴趣的小伙伴可以参考下

AngularJS ng-mouseover 指令

AngularJS 实例

在鼠标指针移动到元素上时执行表达式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">

<div ng-mouseover="count = count + 1" ng-init="count=0">鼠标移动到我这!</div>

<h1>{{count}}</h1>

<p>该实例在鼠标移动到 DIV 元素时，计算变量 "count" 会自动加 1。</p>

</body>
</html>

定义和用法

ng-mouseover 指令用于告诉 AngularJS 鼠标移动到指定的 HTML 元素上时要执行的操作。

ng-mouseover 指令不会覆盖元素的原生 onmouseover 事件, 事件触发时，ng-mouseover 表达式与原生的 onmouseover 事件将都会执行。

语法

所有的 HTML 元素支持该指令。

参数值

值	描述
expression	鼠标移动到元素上时执行的表达式。

以上就是对AngularJS ng-mouseover 指令的资料整理，后续继续补充，谢谢大家支持！

您可能感兴趣的文章:

AngularJS学习笔记之基本指令(init、repeat)
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。ng-app 指令初始化一个 AngularJS 应用程序。ng-init 指令初始化应用程序数据。ng-model 指令把应用程序数据绑定到 HTML 元素。
2015-06-06
将angular-ui的分页组件封装成指令的方法详解
这篇文章主要给大家介绍了将angular-ui的分页组件封装成指令的方法，文中介绍的非常详细，相信会对大家的学习或者工作觉有一定的参考价值，需要的朋友下面来一起看看吧。
2017-05-05
详解Angular之路由基础
单页应用中，组件时构建应用的基础元素，页面展示什么内容均是靠页面有什么组件决定的，而展示什么组件又是由一组路由（带有Url元素的特定集合，可用于导航视图）决定的，希望本文可以帮助读者了解路由的基础概念和基础使用、写法。
2021-05-05
AngularJS的Filter的示例详解
本文通过示例给大家详解angularjs 的filter知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-03-03
Angular实现双向折叠列表组件的示例代码
本篇文章主要介绍了Angular实现双向折叠列表组件的示例代码，分为左右两组，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
angular2实现统一的http请求头方法
今天小编就为大家分享一篇angular2实现统一的http请求头方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Angular中Lazy Loading懒加载陷阱避坑最佳实践
这篇文章主要为大家介绍了Angular中Lazy Loading懒加载陷阱避坑最佳实践,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
Angular中的$watch方法详解
本文通过实例代码给大家介绍了Angular中的$watch方法，包括$watch简介及基本用法，需要的朋友参考下吧
2017-09-09
详解Angular如何正确的操作DOM
这篇文章主要介绍了详解Angular如何正确的操作DOM，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
AngularJS包括详解及示例代码
本文主要介绍AngularJS包括的基础知识，这里整理了相关资料并附示例代码和实现效果图，有需要的小伙伴可以参考下
2016-08-08