Tagit 在我们的 Angular JS 应用程序中表现异常答案

【问题标题】：Tagit behaving strangely in our Angular JS applicationTagit 在我们的 Angular JS 应用程序中表现异常
【发布时间】：2016-08-31 08:52:37
【问题描述】：

我们在 Angular JS 应用程序中使用 JQuery Tagit 库。这需要一些技巧，例如手动调用 $scope.$apply() 以确保 Tagit 小部件 UI 在特定时间更新。但是，我们遇到了一个我们没有专业知识来解决的问题。我们在一个页面上有两个 Tagit 框，其中一个出现在模式弹出窗口中（尽管仍然在同一页面上）。下面是这两个 Tagit 元素的 HTML 代码：

<ul id="mailShareTags" tag-it>   <!-- for the main page -->
<ul id="mailIdTags" tag-it>      <!-- for the modal -->

它们共享相同的指令，但 ID 不同。

问题：

我们观察到的是，如果用户从模态中的 Tagit 中删除条目，这些条目实际上是从 both 底层模型中删除的。换句话说，如果我们通过以下代码检查当前分配的标签，我们观察到从一个 Tagit 中删除标签会将其从 both 模型中删除：

// removing from the modal also removes it here
$scope.currentIds = $("#mailShareTags").tagit("assignedTags");

问题继续存在。当我们的 JavaScript 代码通过以下方式清理主 Tagit 时：

tagit("removeTagByLabel", some_id);

在模态中删除的标签仍然出现在 UI 中。似乎即使这些标签已从模式中删除，也从未发生过让 UI 知道这些标签已删除的摘要（理想情况下，我们甚至不希望一开始就删除这些标签）。

我非常乐意提供您可能需要的任何信息。欢迎提供任何和所有见解。

【问题讨论】：

你能设置一个 plunk 什么的吗？
@HFA 信不信由你，我们刚刚找到了解决方法。我会尽快发布答案。谢谢。

标签： jquery angularjs tag-it

【解决方案1】：

信不信由你，我们尝试了一些东西，结果恰好解决了问题，或者至少解决了 UI 中可见的错误。而不是使用：

$("#mailShareTags").tagit("removeTagByLabel", some_id);

对于小部件中的每个标签，我们改为单独调用：

$("#mailShareTags").tagit("removeAll");

这从 Tagit 中删除了所有元素，并在我们的案例中清理了 UI。

如果有人在删除所有标签时遇到将 Tagit 的模型与 UI 显示的内容同步的问题，请考虑使用 tagit("remoteAll") 而不是单独删除标签。

【讨论】：