CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Akhilesh Sehgal
Akhilesh Sehgal

Reputation: 186

Call Resize method only when resize is completed in Angular Js Resizable

I have used a directive and it calls a method that returns some values which is working perfectly. But my problem is that it calls it repeatedly and what I want is that it should call the method only when the resize is completed. I took this code form

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>

Note: I cant call a .click() event or something using timeout operations. Secondly I have around 150 div that can be resized so cant use a ID also.

Thanks in advance

Upvotes: 1

Views: 180

Answers (1)

Mansi Parekh
Mansi Parekh

Reputation: 519

use resize-stop event.

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

Upvotes: 1

Related Questions