AngularJS | ng-mouseleave指令

简介

在AngularJS中，ng-mouseleave指令可用于为HTML元素添加一个鼠标移出事件监听器，当鼠标移出该元素时，将触发指定的表达式执行。

语法

<element ng-mouseleave="expression"></element>

• element：HTML元素。
• expression：当该元素上的鼠标移出事件触发时要执行的表达式。

示例

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-mouseleave="changeColor()" style="background-color:{{color}}; width:200px; height:100px;"></div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.color = "blue";
  $scope.changeColor = function() {
    $scope.color = "red";
  }
});
</script>

在上面的示例中，div元素有一个ng-mouseleave指令，它会触发changeColor()方法。当鼠标移出div元素时，将执行该方法并将$scope.color设置为"red"，从而使该div元素的背景色变为红色。

注意事项

• ng-mouseleave指令只能用于HTML元素。
• 监听器表达式必须在指令所在的作用域内定义。
• 鼠标在元素内部任何位置移动都会触发ng-mouseleave指令，除非使用ng-mouseleave-disabled指令明确禁用该行为。

参考资料

AngularJS ng-mouseleave指令