I have been searching for how to resize a directive without using jquery ui for days. I have a directive in a div and I want the directive to resize based on container width and height. The container has css property .container{resize:vertical}, which gives a handler icon on the bottom right corner of the container. I am able to change the height and width by draging the handler and I am watching on the property height for now and execute some function if there is change.
Everything works fine. the only limitation is, i have to initiate scope.$apply() which I have on mouseover function. But I want $apply() to execute as soon as I release the handler after draging to desired size.
Seems like angular does not know that resize has happened and therefore it does not fire the watch function until and unless executing scope.$apply().
What I am trying to achieve is something similar behaviour like jQuery UI Resizable. My project manager does not want to use jquery UI. I have tried so far and have the following code:
$scope.$watch(function() {
return $('.container').height(); //get height of this div and watch on it of change
}, function() {
console.log("resized");
});
but this only gets executed when i trigger manually somewhere scope.$apply() after re-sizing. How do i bind some function to be executed when the size of the element gets changed in jquery or angular?
Is there a better way of doing this?
any suggestions or help will be appreciated.
please note: This is not window resize and This works fine in firefox but not in chrome.
Thank you.
