Best way to do this simple technique with Angular?

Question

I'm looking for best practices.

Basically I'd like it so that if you click on a nav button, a drop down would slide down.

So I have :

= link_to 'lez see the dropdown!', '#', 'ng-click' => 'open_dropdown()'

Then I have in my controller..

$scope.open_dropdown = ->

But when I reference this, it pulls up an Angular object that doesn't allow you to access 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 have it worked out ( sort of ) how to hide/show Angular-style where you place a value for ng-show on .dropdown, but I don't want it show. Its gotta slide.

Even more so, I'd like to make it so that if you click somewhere else, it goes away. Typically I can write all of this in jQuery in 6 lines. But Angular acts like a proprietary gated community, so I feel like I should be taking advantage of the koolaid at hand here.

The Question

How does one make a dropdown slide down in the most Angular way?

Answer 1

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 into creating your own Directive for this functionality. Or see if you can find one in Angular-UI or elsewhere.

---

Update

Here's a JSFiddle. I also tested with height: auto; and it worked, but the padding transition didn't animate properly, at least in Chrome. If you can use a specified height, it'll animate a little better, but I realize that isn't always ideal. I even threw in an opacity change in the transition -- it works just as well without, but personally I like the look of it.

(P.S. css3please.com is a great source to quickly check which browser prefixes are necessary for the most common css3 rules. That's where I got all my transition rules from.)