仅在Angular Js Resizable

时间:2017-04-12 06:06:52

标签: javascript jquery html css angularjs

我使用了一个指令,它调用一个返回一些完美工作的值的方法。但我的问题是它反复调用它,我想要的是它只应在调整大小完成时调用该方法。我拿了这段代码

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。

提前致谢

1 个答案:

答案 0 :(得分:1)

使用resize-stop事件。

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