jquery - 使用 Angular 完成这项简单技术的最佳方法是什么？

Question

我正在寻找最佳实践。

基本上我希望这样，如果您单击导航按钮，下拉菜单就会向下滑动。

所以我有:

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

然后我的 Controller 中有..

$scope.open_dropdown = ->

但是当我引用 this 时，它会拉起一个 Angular 对象，该对象不允许您访问 DOM。

我的html

<div class="span1">
  <a class="icon settings" ng-click="open_dropdown()" href="#"></a>
  <div class="dropdown">
    Secret drop down stuffs!
  </div>
</div> 

所以我想我已经解决了(某种程度上)如何隐藏/显示 Angular 风格，在 .dropdown 上为 ng-show 放置一个值，但我不想让它显示出来。它必须滑动。

更重要的是，我想做到这样，如果您单击其他地方，它就会消失。通常我可以用 6 行 jQuery 编写所有这些内容。但 Angular 的行为就像一个专有的封闭社区，所以我觉得我应该利用这里手头的 koolaid。

问题

如何使下拉菜单以最有 Angular 的方式向下滑动？

Answer 1

CSS 是你的 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 */
}

如果您需要更多控制，请考虑为此功能创建您自己的指令。或者看看是否可以在 Angular-UI 或其他地方找到它。

<小时/>

更新

Here's a JSFiddle 。我还使用 height: auto; 进行了测试，它有效，但填充过渡没有正确动画，至少在 Chrome 中是这样。如果您可以使用指定的高度，动画效果会更好一些，但我意识到这并不总是理想的。我什至在过渡中加入了不透明度的变化——没有它也同样有效，但我个人喜欢它的外观。

(P.S. css3please.com 是一个很好的来源，可以快速检查哪些浏览器前缀对于最常见的 css3 规则是必需的。这就是我获取所有转换规则的地方。)