2014-04-15 2 views
3

th (th 내부의 스타일이 지정된 div)의 오른쪽에있는 "노치"를 클릭하여 끌면 크기 조정 테이블 열을 구현하고 싶습니다. 새로운 "선택 윤곽 "요소는 th 안에 만들어지고 크기 조정을위한 지침으로 표시됩니다. mouseup시에는 선택 윤곽이 사라지고 th 요소의 너비가 새 너비로 설정됩니다.AngularJS를 사용하여 테이블 크기 조정

설명하기 위해 fiddle을 만들었습니다.

답변이 지시어를 만드는 것처럼 보이지만 내 주된 문제는 동적으로 추가 된 창 mousemove listener와 지시문 논리 내의 "one"창 mouseup 수신기를 처리하는 방법입니다.

+0

"처리 방법"에 대해 이해하지 못합니다. 당신은 이미 일하는 해결책을 가지고 있습니다, 그렇죠? – zeroflagL

+0

제 이해는 OP가 자신이 가지고있는 솔루션을 Angular로 변환하는 방법을 알고 싶습니다. 아마도 대부분 지시문을 사용하고있을 것입니다. –

+1

지시어의 postLink 콜백에 피들을 둡니다. '$ th.width()'와 같은 호출은 테이블이 DOM에 이미 표시되어 있지 않으면 작동하지 않습니다. 지시문이 템플리트를 사용하여 테이블을 작성하는 경우. '$ timeout'을 사용해야 할 수도 있습니다. 그렇지 않으면, 나는 지시어로 할 수있는 귀하의 바이올린에서 아무것도 볼 수 없습니다. – cgTag

답변

0

귀하의 질문은 크기 조정에 대한 "선택 물"에 관한 것입니다. 이 문제의 해결책은 $scope.$apply을 사용하는 것인데, 이는 자동으로 크기 변경이 DOM HTML로 변경되었음을 알리는 책임이 있습니다. mousemove(e)을 확인하십시오.

코드 : http://jsfiddle.net/4d6Bd/31/

+0

우리는 뭔가를 할 수 있습니다 .. 만약 내가 그것을 드래그해서 보여줄 rezise를위한 colunm을 끌면 .. –

관련 문제