AngularJS 和 ui-sortable（分支 1.2）：ng-mouseover 在排序后中断答案

【问题标题】：AngularJS and ui-sortable(branch 1.2): ng-mouseover breaks after sortingAngularJS 和 ui-sortable（分支 1.2）：ng-mouseover 在排序后中断
【发布时间】：2013-12-11 14:35:21
【问题描述】：

我将我的应用升级到 AngularJS 1.2，因此也切换到 ui-sortable v 1.2。

排序是为 Accordion-Groups 实现的（来自 ui-bootstrap）。使用可排序的主树版本，我可以在手风琴标题内收听 ng-mouseover/ng-mouseleave，但使用 1.2 版本，只要我没有进行任何排序，mouseevents 只会收听。对排序顺序进行任何更改后，mouseevents 就会失聪...

这是一个 Plunker：http://plnkr.co/edit/n8yms9pb7uJp77zZ9LFK?p=preview

谁能给我一些建议如何解决这个问题？谢谢

【问题讨论】：

可能不应该在您的 plunk 中使用 raw.github.com 链接：Refused to execute script from 'https://raw.github.com/angular-ui/ui-sortable/angular1.2/src/sortable.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
正确的方法是什么？无法通过“查找外部库”找到可排序的..
知道了：更新到 rawgithub.com 链接

标签： angularjs jquery-ui-sortable angular-ui angularjs-bootstrap

【解决方案1】：

身份问题。

elementInsertedByDropping !== elementSelectedAndDragged

在控制台中，可以验证上面的断言。这样就可以将问题的类别缩小到一个相对熟悉的问题。

我自己也在学习 Angular，我也遇到了 ui-sortable 的问题；请不要认为我的意见是确定的。但是，我认为问题在于 $watch 侦听器需要重新绑定到新元素，因为它是在 Angular 之外异步创建的。

“ng.$rootScope.Scope”文档的 $apply 部分清楚地描述了这种情况。如果我是正确的，您需要在您的控制器中编写$scope.$apply(...) 代码，或者[最好] 编写一个处理插入的自定义指令。

幸运的是，jQuery-ui-sortable 的 "update" 事件似乎可以很容易地在自定义指令中使用，以确保元素被绑定。我发现博主respectTheCode 和Michal Ostruszka 非常清楚地讨论了编写jQuery-ui-sortable 指令的问题； Greg Gigon 和其他几个人也是如此，但我现在只能提供两个链接。

如果我以后能提供更准确的信息，我会修改这个答案；我自己还在学习这些东西，我想知道如何做一些非常相似的事情。

[编辑：我对 Angular-UI-Sortable 不够熟悉，不知道这是错误还是缺少功能。]

【讨论】：

感谢您的提示。如果我不能用“官方”指令解决问题，我会考虑仔细研究 Michal Ostruszkas 指令。但正如@blesh 提到的，在 github 上提交问题可能是目前的方式......

【解决方案2】：

看起来像 ui-sortable 中的错误。

我的猜测：它似乎正在丢失事件指令中的绑定，可能是因为它正在破坏旧的 DOM 元素并创建一个新元素，而无需使用 $compile 重新附加范围。 I'd save this plunk and submit and issue on their GitHub repository

【讨论】：