Angular中的事件指令ng-mouseenter 和 ng-mouseleave

Angular中的事件指令ng-mouseenter 和 ng-mouseleave

指令 是我们用来扩展浏览器能力的技术之一，在DOM编译期间和HTML关联着的指令会被检测到，这就是指令指定改变DOM或者指定DOM行为的基础。

AngularJS中有一套完整的，可扩展的，用来帮助web应用开发的指令集，它使得HTML可以成为 “特定领域语言（DSL）”, 增加了额外的标签或者属性来实现了更加强大的数据处理功能。

AngularJS为我们提供了大量的内置指令，都是以Ng-作为开头，常用的内置指令有控制指令如ng-app等、节点指令如ng-style、ng-class等、渲染指令如ng-bind、ng-include、ng-repeat等、事件指令如ng-click、ng-change等等。

在使用AngularJS框架的时候，如果我们能够很好的使用事件指令就可以有效的减少元素的获取和改变的相关代码，使编码更加便捷，另一方面在AngularJS框架中有时候用JQuery获取元素又可能会获取不到，或者操作不生效。今天就写一个鼠标滑过控制DOM元素显隐的例子。

首先这里指令后面直接加表达式改变变量的值

// An highlighted block
<div style="position: relative;">
    <div class="hint" ng-mouseover="showHint = true" ng-mouseleave="showHint = false">
       鼠标滑动控制提示的显隐
        <div ng-show="showHint" style="font-size: 12px;position: absolute;right: 12px;top: -9px; ">输入蓝牙名称APP快速检测到蓝牙设备</div>
    </div>
</div>

然后ng-mouseenter也可以像ng-click一样后缀函数表达式

<div style="position: relative;">
    <div class="hint" ng-mouseover="showHint()" ng-mouseleave="hidenHint()">
        鼠标滑动控制提示的显隐
        <div ng-show="showHint" style="font-size: 12px;position: absolute;right: 12px;top: -9px; ">输入蓝牙名称APP快速检测到蓝牙设备</div>

好啦，这样就可以避免烦杂的元素获取改变属性等操作了，一般情况下事件指令后面跟函数的比较多。