Tagit在我们的Angular JS应用程序中表现得很奇怪

Question

我们在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中删除条目，则实际上将从两个基础模型中删除条目。换句话说，如果我们通过以下代码检查当前分配的标签，我们发现从一个Tagit中删除标签会将其从两个模型中删除：

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

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

tagit("removeTagByLabel", some_id);

在模态中删除的标签仍会显示在UI中。似乎即使这些标签已从模态中删除，也从未发生过摘要让UI知道这些标签已被删除（理想情况下我们甚至不想首先删除这些标签）。

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

Answer 1

信不信由你，我们在云雀上尝试了一些事情，它碰巧解决了问题，或者至少在UI中可见错误。而不是使用：

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

对于小部件中的每个标记，我们只调用一次：

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

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

如果在删除所有代码时，如果有任何人遇到将Tagit模型与用户界面显示同步的问题，请考虑使用tagit("remoteAll")而不是逐个删除代码。