AngularJS | ng-mouseup指令

简介

ng-mouseup是AngularJS的一个指令，它用于监听鼠标在指定元素上松开时触发的事件。

语法

<div ng-mouseup="expression"></div>

参数

ng-mouseup指令的参数是一个表达式，它会在鼠标在指定元素上松开时被执行。

示例

下面是一个简单的示例，当用户在一个div元素上按住左键拖动时，会在控制台中输出鼠标松开时的坐标。

<div ng-mousedown="startDragging($event)" ng-mousemove="dragging($event)" ng-mouseup="stopDragging($event)">
  Drag me!
</div>

<script>
angular.module('myApp', [])
  .controller('myController', function($scope) {
    var startX = 0, startY = 0, x = 0, y = 0;

    $scope.startDragging = function(event) {
      startX = event.screenX - x;
      startY = event.screenY - y;
    };

    $scope.dragging = function(event) {
      x = event.screenX - startX;
      y = event.screenY - startY;

      console.log('x: ' + x + ', y: ' + y);
    };

    $scope.stopDragging = function(event) {
      console.log('Drag stopped at x: ' + x + ', y: ' + y);
    };
  });
</script>

总结

ng-mouseup指令是AngularJS中用来监听鼠标在指定元素上松开时触发的事件的指令，它可以让我们轻松地实现一些拖拽等交互效果，是一个很实用的指令。