在 Angular 项目中可选择 jquery ui 的轻量级替代品答案

【问题标题】：lightweight alternative to jquery ui selectable in an angular project在 Angular 项目中可选择 jquery ui 的轻量级替代品
【发布时间】：2015-04-02 01:28:55
【问题描述】：

jQuery UI selectable 小部件是一个强大的工具。

https://jqueryui.com/selectable/

但是，将这个小部件添加到一个有角度的项目中，我认为会因为反对“有角度的方式”而皱眉。但是，我试图广泛搜索一个替代插件，该插件提供与 jquery 和 angular 生态系统中的可选小部件相同的功能，但我找不到。例如，著名的 Angular UI 项目就没有这样的功能。

我错过了什么吗？是否有一种纯 javascript/css 方式来模仿跨浏览器工作的 jQuery UI 可选小部件，或者这是另一种获得功能的最佳方式是忽略“角度方式”并包含 jQuery UI 小部件的情况？ /p>

【问题讨论】：

有这个（好不好不好评论）：github.com/willgm/ngSelectable
@NewDev - 是的，我熟悉那个项目 - 它依赖于 jQuery UI。 github.com/willgm/ngSelectable/blob/master/README.md
是的，确实如此。但我没有看到您在问题中的哪个位置指定不依赖 jQuery UI 作为条件。
@New Dev - 好的，但问题确实是，“是否有一种纯 javascript/css 方式来模仿 jQuery UI 可选小部件......？”
你有一个错误的二分法：“是否有纯 JS 方式......或者这是忽略 Angular 方式的另一种情况”。创建一个包装 jQuery-UI 功能的指令并没有忽略 Angular 的方式。但是，无论如何，这个问题是题外话，因为它要求推荐一个图书馆

标签： javascript jquery angularjs jquery-ui jquery-ui-selectable

【解决方案1】：

我遇到了类似的问题，并通过使用 selectable.js 解决了这个问题。它仍然不是 100% Angular，但它比包含 jquery 和 jquery-ui 的开销要少得多。

Example of integrating Angular with Selectable.js

有几件事可能需要解释：

使用例如安装 selectable.js npm
使用import Selectable from 'selectable.js'; 包含selectable.js。这至少适用于 webpacker，因此应该适用于使用 angular cli 创建的项目
使用 selectable 的 appendTo 配置项很重要。这需要对 div 的引用。在 Angular 中，这应该使用 @ViewChild 完成，并且需要 div 获取标签，在本例中为 #container。详情见https://stackoverflow.com/a/42591893/1128705
容器标签的引用只有在Angular完成视图初始化后才可用，因此我们需要使用AfterViewInit

【讨论】：

谢谢。最初的问题是关于 AngularJS，而不是 Angular2+。看起来还没有人尝试将它与 AngularJS 集成......
我并没有真正意识到问题是关于 AngularJS，因为标题提到了 angular。但是我提出的解决方案确实可以与 AngularJS 一起使用，而且只需极少的修改！
是的。我去了 github repo，看起来有人能够用 AngularJS 做一个基本的例子，然后在尝试与 ng-repeat 结合使用时遇到了麻烦。也许必须构建一个适当的 AngularJS 指令来适应。 github.com/Mobius1/Selectable/issues/16