The best way to do this simple technique with Angular?
I'm looking for best practices.
In principle, I would like to see when you press the nav buttons, drop-down menus decreased .
So, I have a:
= link_to 'lez see the dropdown!', '#', 'ng-click' => 'open_dropdown()'
Then I have it in my controller.
$scope.open_dropdown = ->
But when I link to this
, it pulls the Angular object which prevents you from accessing the DOM.
my html
<div class="span1">
<a class="icon settings" ng-click="open_dropdown()" href="#"></a>
<div class="dropdown">
Secret drop down stuffs!
</div>
</div>
So, I think I worked out (sort of) how to hide / show Angular -style where you put the value for ng-show
on .dropdown
, but I don't want it to show. He needs to slide.
Moreover, I would like to make it so that, clicking in another place, he leaves. I can usually write the whole thing in jQuery in 6 lines. But Angular acts like a private closed community, so I feel like I should be using koolaid here.
Question
How do I take a sinking shot in the most convenient Angular way?
source to share
CSS is your friend:
<a ng-click="isOpen = !isOpen">open</a>
<div class="dropdown" ng-class="{ open: isOpen }">
dropdown stuff
</div>
.dropdown {
height: 0;
transition: height 0.5s ease-in;
/* vendor prefixes needed as well, see fiddle below */
}
.dropdown.open {
height: 200px;
/* I think "height: auto" should work, too */
}
If you need even more control, look at creating your own Directive for this function. Or see if you can find it in Angular-UI or elsewhere.
Update
Here's a JSFiddle . I also tested with help height: auto;
and it worked, but the add-on transition didn't animate properly, at least in Chrome. If you can use the specified height it will improve slightly, but I understand that this is not always ideal. I even changed the transparency of the transition - it works just as well, but personally I like its look.
(PS css3please.com is a great source for a quick check on what browser prefixes are needed for the most common css3 rules. All my transition rules are from.)
source to share