1
I’m creating a navigation sidebar for an Angularjs application. The structure is basically a tree menu, but each level has different interactions (which I will still build). For example, the first and second levels will only show and hide the content when clicked, animated and all, while the third, depending on a parameter, will enable or disable a "Collapse" effect. Here is the structure of the menu:
- Presidente
- Dilma
- Aetius
- Marina
- Luciana Genro
- Governor
- Alckmin
- Skaf
- Padilla
- Senator
- Deputy
- Congressman
- Tirirca
- Russoman
- Feliciano
- State Representative
- Rooftop
- Tripoli
- Capez
- Congressman
Each of these items can open a link or expand the child menu. For example, clicking on "Senator" would go to a link with the composition of the Senate, while the other items would expand the list to another side menu and the child elements of this list would have the effect of "Collapse", when selecting one, hide the other.
This is what I’ve been able to develop so far: http://jsfiddle.net/mata9a1z/
<leftnav pins="true" collapsable="true" labels="true"></leftnav>
I would like to pass the parameter labels
to enable icons in the first level, the parameter pins
to the second level and collapsable
to the third level. This is possible?
The functions select()
and isSelected()
work, why collapse()
, isCollapsed()
and foo()
do not work in the third level? I had to use the attribute require: '^leftnav'
in the directives because otherwise different instances of controllers would be created for each menu item, and so when selecting an option, it would not hide the others. There’s another way to do this?
Thank you very much! When I asked the question so far this menu has undergone many modifications, I had already managed to make it work but without using $Compile. I’ll try to refactor it now using this method.
– Samuel Guimarães