Sidebar closes when deleting element of array

Question

I'm using mobile angular ui to open and close a sidebar. In this sidebar a user can search for persons and add or remove these from an array.

I have this repeat that shows the array of persons when clicking on the <a ...></> it closes the sidebar:

<li ng-repeat="recipient in persons.recipients">
    <span class="wrapper">
        <span class="imageWrap">
            <span class="initials">
                {{recipient.firstName.charAt(0)}}{{recipient.lastName.charAt(0)}} </span>
        </span>
        <a href="" class="trash" ng-click="removeRecipient($index);"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
        <span class="details">
            <span class="info">
                {{recipient.firstName}} {{recipient.lastName}}
                <span class="persnr">{{recipient.employeeID}}</span>
            </span>
        </span>
    </span>
</li>

The above html snippet is from a directive that is in the sidebar. The removeRecipient($index); function looks like this:

$scope.removeRecipient = function(index) {
    $scope.persons.recipients.splice(index,1);
}

The function works but closes the sidebar and I can't figure out why it does this. So each time a user removes a recipient it has to swipe the sidebar open again. How do I keep this sidebar open?

References:

• mobile angular ui: http://mobileangularui.com/docs/sidebars/

SOLUTION

I solved my problem by adding $event.stopPropagation(); in the ng-click right behind the removeRecipient($index); function.

Answer 1

From doc, there was one line.

You can put ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarLeft' inside the sidebar to make it close after clicking links inside them.

so may be you can use that or you can use or you can do like below.

e.stopPropagation()

for that you need to pass $event in

<a href="" class="trash" ng-click="removeRecipient($index,$event);"><i class="fa fa-trash-o" aria-hidden="true"></i></a>

so in code, you can write.

$scope.removeRecipient = function(index,e) {
    if(e){
        e.stopPropagation()
    }
    $scope.persons.recipients.splice(index,1);
}

I didn't used same tool, but may be this is issue.