Search code examples
jqueryangularjstag-it

Tagit behaving strangely in our Angular JS application

We are using the JQuery Tagit library in our Angular JS application. This requires a bit of finessing, for example making manual calls to $scope.$apply() to make sure the Tagit widget UI is updated at certain times. However, we have encountered a problem which we don't have the expertise to solve. We have two Tagit boxes on a single page, one of which appears in a modal popup (though still on the same page). Here is the HTML code for these two Tagit elements:

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

They share the same directive, but the IDs are different.

The problem:

What we are observing is that if a user removes entries from the Tagit in the modal, the entries are actually being removed from both underlying models. In other words, if we inspect the currently assigned tags via the following code, we observe that removing a tag from one Tagit removes it from both models:

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

The problem continues further. When our JavaScript code does cleanup on the main Tagit via:

tagit("removeTagByLabel", some_id);

the tags which were removed in the modal still appear in the UI. It seems that even those these tags were removed from the modal, a digest never took place to let the UI know that these tags were removed (and ideally we don't even want these tags removed in the first place).

I would be more than happy to offer any information you might require. Any and all insights would be welcome here.

Solution

  • Believe it or not, we tried something on a lark and it happened to resolve the problem, or at least the error visible in the UI. Instead of using:

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

    for each tag in the widget, we instead made a single call to:

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

    This removed all elements from the Tagit as well as cleaned up the UI in our case.

    If anyone encounters an issue with synching a Tagit's model with what the UI shows when removing all tags, consider using tagit("remoteAll") instead of removing tags individually.