javascript - 只有在 Angular Js Resizable 中完成调整后才调用 Resize 方法

Question

我使用了一个指令，它调用了一个返回一些值的方法，该方法运行良好。但我的问题是它反复调用它，而我想要的是它应该只在调整大小完成时调用该方法。我采取了这种代码形式

https://codepen.io/fabiobiondi/pen/pvJrBE

app.directive('resizable', function () {
return {
    restrict: 'A',
    scope: {
        callback: '&onResize'
    },
    link: function postLink(scope, elem, attrs) {
        elem.resizable();
        elem.on('resize', function (evt, ui) {
            scope.$apply(function () {
                if (scope.callback) {
                    scope.callback({ $evt: evt, $ui: ui });
                }
            })
        });
    }
};
})

<div resizable on-resize="resize($evt, $ui)" class="box">
     Resizable Div
</div>

注意:我不能调用 .click() 事件或使用超时操作的东西。其次，我有大约 150 个可以调整大小的 div，所以也不能使用 ID。

提前致谢

Answer 1

使用调整大小停止事件。

 elem.on('resizestop', function (evt, ui) {
        scope.$apply(function () {
            if (scope.callback) {
                scope.callback({ $evt: evt, $ui: ui });
            }
        })
    });