Resize table columns using AngularJS

Question

I would like to implement resizable table columns, such that when you click and drag on a "notch" on the right side of the th (just a styled div inside the th ), a new "marquee" element is created inside the th and displayed as a guide for resizing. On mouseup, the marquee disappears and the th element's width is set to the new width.

I have created a fiddle to illustrate.

It seems like the answer is to create a directive, but my main hangup is how to handle the dynamically-added window mousemove listener plus the "one" window mouseup listener within the directive logic.

Answer 1

I believe that your question is about the "marquee", that is shown for the resize. The solution to this problem is using $scope.$apply , which is responsible for notifying about change of the resize automatically to DOM HTML. Check out mousemove(e) .

Code: http://jsfiddle.net/4d6Bd/31/