推荐使用：Angular-resizable - 灵活的可调整大小容器指令

Angular-resizable 是一个专为 AngularJS 设计的优秀指令，用于创建可以自由调整大小的容器。这个项目的核心理念是将布局逻辑保持在CSS中，而让指令专注于处理调整大小的动作逻辑，使得代码结构更加清晰，易于维护。

项目介绍

Angular-resizable 提供了一种简单的方法来创建支持顶部、底部、右侧和左侧任意方向缩放的元素。它不仅提供了基本的缩放功能，还允许自定义拖动手柄样式，并通过事件监听进行实时尺寸变更操作。如果你正在寻找一个轻量级且灵活的解决方案来实现容器的动态调整大小，那么这个项目无疑是你的不二之选。

技术分析

Angular-resizable 指令包含了以下关键特性：

• 支持通过数组设置可调整的边框方向，如 'top', 'right', 'bottom' 和 'left'。
• 内置了CSS文件（angular-resizable.min.css）提供默认的手柄样式，但你可以轻松覆盖这些样式以匹配项目风格。
• 可以与 Flexbox 结合使用，只需添加 r-flex="true" 属性。
• 提供了多个属性选项，如设置预设宽度、高度、是否居中缩放等。
• 包含三个事件 (resizeStart, resizing, resizeEnd)，用于监听并响应元素尺寸变化的过程。

应用场景

• Web应用中的可调整大小的面板或窗口。
• 数据可视化工具，允许用户自定义图形区域的大小以适应他们的需求。
• 响应式设计，用户可以根据喜好定制界面布局。
• 在线编辑器，用户能够自由调整各个组件的大小。

项目特点

1. 分离逻辑：仅负责缩放动作的逻辑，使布局逻辑保留在CSS中，提高代码的可读性和可维护性。
2. 灵活性：支持多种缩放方向，兼容Flexbox布局，可以自定义手柄样式。
3. 事件驱动：通过 resizeStart、resizing 和 resizeEnd 事件，可以在缩放过程中获取实时尺寸信息并进行相应的操作。
4. 性能优化：对 resizing 事件进行了节流处理，降低CPU使用率，同时可通过 rNoThrottle 属性关闭节流。
5. 易用性：通过简单的配置即可使用，无需复杂设置。

总体来说，Angular-resizable 是一个强大且易于集成的开源库，对于任何需要动态调整大小功能的AngularJS项目，它都是一个理想的伙伴。立即通过 npm 或 bower 安装，在你的项目中体验它的魅力吧！

npm install angular-resizable
# 或
bower install angular-resizable

最后，记得导入 angular-resizable.min.js 和 angular-resizable.min.css 文件，然后在你的应用模块中注入 angularResizable 模块，开始使用这个强大的指令吧！