角度js中的自定义可拖动指令会引发范围错误

Question

我正在尝试在angularjs中实现自定义可拖动指令，但它实现了 范围错误。这段代码有什么问题

＆＃13;

＆＃13;

(function (window, angular, undefined) {

    var app = angular.module('ngDraggableModule', []);

    app.directive('easyDrag', ['$document', function ($document) {
        return {
            restrict: 'EA',
            scope: {
                params: '=',
                elemId: '='
            },
            link: function (scope, elem, attrs) {
                var isMouseDown = false,
                    startDrag = false,
                    position = {},
                    x = 0,
                    y = 0,
                    startX = 0,
                    startY = 0,
                    changedPos = 0;

                elem.bind('mousedown', onMouseDown);

                function onMouseDown(e) {
                    if (angular.isDefined(scope.params.disabled) && scope.params.disabled === true) {
                        return false;
                    }
                    isMouseDown = true;
                    startX = e.screenX - x;
                    startY = e.screenY - y;
                    $document.bind('mousemove', onMouseMove);
                    $document.bind('mouseup', onMouseUp);
                }

                function onMouseMove(e) {
                    if (isMouseDown) {
                        if (!startDrag) {
                            startDrag = true;
                            if (angular.isFunction(scope.params.start)) {
                                scope.params.start(changedPos, e, scope.elemId);
                            }
                        }
                        y = e.screenY - startY;
                        x = e.screenX - startX;
                        position = {};
                        if (angular.isDefined(scope.params.axis)) {
                            if (scope.params.axis.toLowerCase() == 'x') {
                                position.marginLeft = x + 'px';
                            }
                            else if (scope.params.axis.toLowerCase() == 'y') {
                                position.marginTop = y + 'px';
                            }
                        } else {
                            position.marginTop = y + 'px';
                            position.marginLeft = x + 'px';
                        }
                        changedPos = position;
                        elem.css(position);
                        if (angular.isFunction(scope.params.drag)) {
                            scope.params.drag(e, changedPos, scope.elemId);
                        }
                    }
                }

                function onMouseUp(e) {
                    if (!isMouseDown) {
                        return false;
                    }
                    isMouseDown = false;
                    startDrag = false;
                    if (angular.isFunction(scope.params.stop)) {
                        scope.params.stop(changedPos, e, scope.elemId);
                    }
                }

            }
        }
    }]);
})(window, window.angular, undefined);

var app = angular.module('DemoApp',['ngDraggableModule']);

app.controller('MainCtrl',['$scope',function($scope){
  $scope.assetDragParams = {
    drag : function(e,pos,id){
      console.log(id); // here is the error
    }
  }
}])

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MainCtrl">
 <div easy-drag params="assetDragParams" elem-id="col._id">
    drag it
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

调用指令，如此抛出RangeError：超出最大调用堆栈大小  怎么了 ？提前谢谢。

Answer 1

您需要在Array.new(groups-ceils, floor).concat(Array.new(ceils, floor+1)) 之外绑定mousemove + mouseup，无论如何在onMouseDown函数中设置mousedown。所有的功能绑定应该是这样的：

isMouseDown = true

elem.bind('mousedown', onMouseDown); $document.bind('mousemove', onMouseMove); $document.bind('mouseup', onMouseUp); 函数应为：

onMouseDown