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?
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.)
you can use CSS translate property in conjunction with ngShow angular JS directive. angular does not provide animation effects, but the angular UI can provide this for you.