AngularJS-在多个元素上使用ng-click和ng-class时的奇怪行为

Question

I wasn't sure of the best way to term this question.

I'm using ui.bootstrap and have several dropdowns in my navbar. I have a nice animation on these navbar dropdowns. They're all basically like this one:

<div id="settings_menu" dropdown data-ng-click="ddAnimate()">
    <span class="glyphicons glyphicons-settings dropdown-toggle cursor" data-toggle="dropdown"></span>
    <ul class="dropdown-menu" role="menu" data-ng-class="ddGetClass()">
        <li><a href="javascript:void(0);"><span class="glyphicons glyphicons-bell text-purple mr15"></span>Users</a></li>
        <li><a href="javascript:void(0);"><span class="glyphicons glyphicons-notes text-blue mr15"></span>Servers</a></li>
        <li><a href="javascript:void(0);"><span class="glyphicons glyphicons-facebook text-orange mr15"></span>Crons</a></li>
    </ul>
</div>

So notice the ddAnimate() on the parent div and the ddGetClass() on the child UL element.

Here's the controller:

'use strict'

angular.module('tbads').controller('TopNavController', ['$scope',

    function($scope) {
        var flag = true;
        $scope.ddGetClass = function() {
            return flag ? "": "animated animated-shortest flipInX";
        }

        $scope.ddAnimate = function() {
            flag = !flag;
        }
    }

]);

Ok so quite simply, this works well, as long as you're following a specific pattern of clicking. For example, and keep in mind I have several of these on the header, with their own Id's, etc.

If I click on one of them, the animation takes place as the class is appended with ng-class. If I click it again, it closes and the class is removed. If I click it again, it continues to operate just fine. The problem is, if I click on one dropdown, it animates, and if I click on another dropdown or whitespace instead of closing the first one, the first one's class is never removed, so that if I go back to it and click it again, the animation is not present.

My basic problem is I need to understand how to remove the animate class on all other dropdowns when another dropdown is clicked? I'm sure I'm doing something wrong, or perhaps there's a better way.

Regardless, I need that class removed if the dropdown is not open.

Thank you for suggestions.

Answer 1

One solution would be to use $interval to check whether the dropdown is open (has an 'open' class). If it's not open, then remove the animation classes.

$interval(function()
{
   if(! jQuery("#settings_menu").hasClass("open")))
   {
      jQuery("ul.dropdown-menu").removeClass( "animated animated-shortest flipInX" )
   }
});

Don't forget to inject $interval into your controller. Since you are using multiple dropdowns, each surrounding div and inner ul will need unique id's. If you are using ng-repeat to produce your dropdowns, you can use $index to generate unique id's.