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.

Are you using `ui-toggle` in the sidebar `a` tags? – IronAces Aug 11 '16 at 07:19 — IronAces, Aug 11 '16 at 07:19
I'm not using `ui-toggle` in the sidebar `a` tags. – david.carm Aug 11 '16 at 07:22 — david.carm, Aug 11 '16 at 07:22

Nitish · Accepted Answer · 2016-08-11T11:48:03.447

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.

edited Aug 11 '16 at 11:48

answered Aug 11 '16 at 09:53

Nitish

651
1
7
14

Thanks for replying, I tried these solutions before and neither of them worked. – david.carm Aug 11 '16 at 11:19
Ok so I searched further after stopping the `$event` and found this line : `$event.stopPropagation();`. It solved my problem. I will count your answer as correct because it was close. – david.carm Aug 11 '16 at 11:27
yes.. sorry i forgot about stopPropagation. I will update answer – Nitish Aug 11 '16 at 11:47

Sidebar closes when deleting element of array

1 Answers1