AngularJS ng-click only working on second click

Question

Attempting to collapse a dropdown menu (language selection), within a mobile bootstrap navbar. On first click, the dropdown menu with the languages opens fine, after changing languages the dropdown language menu closes, but when I attempt to change the language again, I have to double click the dropdown for it to open. Can anyone help me with this?

    <li class="dropdown" dropdown style="margin-top: 25%; left: 7.5%;">
            <a href="#" class="dropdown-toggle" dropdown-toggle role="button" ng-click="visible = true">
                {{vm.languageSel.name}}
                <span class="caret"></span>
            </a >
            <ul class="dropdown-menu" ng-show="visible">
                <li ng-repeat="lang in vm.languages" ng-click="$parent.visible = false">
                    <a ng-click="vm.chgLang($index)">
                        {{lang.name}}
                    </a>
                </li>
            </ul>
        </li>

maybe it's a propagation problem, have you tried to have the 2 click events in the same place? `` (and removing it from the `li`) — Kaddath, Apr 25 '18 at 14:52
something else must interfer with your code, i gave a quick try of your code (in a ionic 1 test project, was easiest with my current setup, uses Angular v1.5.3), without modification and it worked fine. — Kaddath, Apr 25 '18 at 15:23
Before posting more code, you should inspect your app in a browser's developper tools and check the event listeners bound to your element and its parents. As i couldn't reproduce your issue, something else must interfer, but we can't look to the whole code for that, it might even not be in it and caused by a plugin you didn't write, the running app is needed to isolate the guilty one here. — Kaddath, Apr 26 '18 at 09:42
Went ahead and did that, I think its an issue with ng-show and ng-show interfering with bootstraps dropdown-menu — tru2793, Apr 26 '18 at 15:00

score 0 · Answer 1 · answered Apr 25 '18 at 14:42

0

I think it's because visible is initialised by default to false. Try to add ng-init="visible = true" on the first li directive

answered Apr 25 '18 at 14:42

Maxime Turcotte

34
6

Still the same issue – tru2793 Apr 25 '18 at 14:45

score 0 · Answer 2 · answered Apr 25 '18 at 15:49

I think it's because of the $parent. Can you try without it? Like this:

<li class="dropdown" dropdown style="margin-top: 25%; left: 7.5%;">
        <a href="#" class="dropdown-toggle" dropdown-toggle role="button" ng-click="visible = true">
            {{vm.languageSel.name}}
            <span class="caret"></span>
        </a >
        <ul class="dropdown-menu" ng-show="visible">
            <li ng-repeat="lang in vm.languages" ng-click="visible = false">
                <a ng-click="vm.chgLang($index)">
                    {{lang.name}}
                </a>
            </li>
        </ul>
    </li>

still no luck, would it be helpful to post more of my code? – tru2793 Apr 25 '18 at 16:11 — tru2793, Apr 25 '18 at 16:11

AngularJS ng-click only working on second click

2 Answers2