使用AngularJS调整表格列大小

Question

我希望实现可调整大小的表格列，这样当你点击并拖动右侧的“刻度线”时（它只是th内部的一个样式化的

），会在th内创建一个新的“跑马灯”元素，并显示为调整大小的指南。鼠标松开后，跑马灯消失，th元素的宽度设置为新的宽度。

我创建了一个示例来说明：fiddle 看起来答案是创建一个指令，但我的主要问题是如何处理指令逻辑中动态添加的窗口mousemove监听器以及“one”窗口mouseup监听器。

- AndyPerlitch

---

我不理解你所说的“如何处理”。你已经有一个可行的解决方案了，不是吗？ - a better oliver

我的理解是，OP想知道如何将他的解决方案转换为Angular，很可能使用指令。 - Michal Charemza

将你的fiddle放在指令的postLink回调函数中。除非表格已经在DOM中可见，否则像$th.width()这样的调用是无效的。如果指令使用模板来创建表格，你可能需要使用$timeout。否则，我在你的fiddle中没有看到任何可以在指令中完成的事情。 - Reactgular

@MichalCharemza 感谢您的编辑和澄清，这正是我所寻找的。Mathew Foscarini 感谢您的见解。我会尝试一下。 - AndyPerlitch

我们能做些什么，让用户无法将列的大小调整为小于列内容宽度？ - Javascript Coder

Answer 1

我相信你的问题是关于“跑马灯”的，它在调整大小时显示。解决这个问题的方法是使用$scope.$apply，它负责自动通知DOM HTML有关调整大小的更改。查看mousemove(e)。

代码：http://jsfiddle.net/4d6Bd/31/

- John Darwin Morales González