Hi there,

I'm having trouble finding the best way to synchronize state information 
between instances of a directive inside an ng-repeat.

Part of a big app, this small part implements something close to a menu bar 
with drop-down menus.  So, like any desktop app, clicking on one menu item 
should first cause all other drop down menus to close and then the menu 
corresponding to the clicked menu item should open.  (the actual app 
combines menus with displaying a lot of graphical status information, but 
the concept is still the same).

Further, there is a lot of AJAX data updating going on.  The fragment looks 
like:

<menuitem ng-repeat="item in itemList" ng-click="itemWasClicked(item)"
></menuitem>



Where itemList is updated in the controller which polls a back end server.

I've tried all kinds of mechanisms but I can't get suitable behavior: 
- if the drop down menu is closed, clicking on one menu instance should 
close all other drop down menus and open the clicked drop down menu
- if the drop down menu is open, clicking on its menu instance should open 
its drop down menu

(totally common behavior)

I've tried:
a) Using a service to coordinate 'who is open'.  This works *if* there is 
no AJAX updating going on.  Otherwise, there is a significant delay between 
the new menu opening and the previous menu closing.

b) Using $broadcast / $on, where the clicked item $broadcasts to everyone 
else "I'm opening" and the others close their drop down menus in response. 
 However, this causes ever-increasing calls to the $on handler on each 
mouse click –– eventually reaching thousands and thousands of calls to the 
$on handler.  (something like described here 
<http://stackoverflow.com/questions/26775628/angular-broadcast-on-called-multiple-times-in-directive>
)

I've made a very simple example showing the delay for case a) : 
http://plnkr.co/edit/OYJ71YCjptHDWEhu10rE

Any suggestions on how to structure this to get the "normal" expected 
behavior for menu opening/closing?


-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to