Best way to do this simple technique with Angular?

Question

Best way to do this simple technique with Angular?

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?

jquery
angularjs

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.)

Answer 2

you can use CSS translate property in conjunction with ngShow directive of angular JS. Angular does not provide animation effects but angular UI might provide you that.