使用Angular进行这种简单技术的最佳方法

Question

我正在寻找最佳实践。

基本上，我想要它，以便如果您单击导航按钮，下拉菜单会向下滑动。

所以我有：

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

然后我在我的控制器中..

$scope.open_dropdown = ->

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

我的网页

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

所以我想我已经解决了（某种程度上）如何隐藏/显示角度样式，您将ng-show的值放在.dropdown上，但我不希望它显示。它必须滑动。

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

问题

如何以最有角度的方式使下拉列表向下滑动？

Answer 1

CSS 是你的朋友：

<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或其他地方找到一个。

---

更新

这是一个JSFiddle。我也用height: auto;进行了测试，它工作了，但填充过渡没有正确动画，至少在 Chrome 中是这样。如果你可以使用指定的高度，它的动画效果会更好一些，但我意识到这并不总是理想的。我什至在过渡中加入了不透明度的变化 - 它在没有的情况下工作得很好，但就我个人而言，我喜欢它的外观。

（P.S. css3please.com 是一个很好的来源，可以快速检查最常见的 css3 规则需要哪些浏览器前缀。这就是我从那里获得所有过渡规则的地方。

Answer 2

您可以将 CSS translate 属性与 angular JS 的 ngShow 指令结合使用。Angular 不提供动画效果，但角度 UI 可能会为您提供。