Question

我正在寻找最佳实践。

基本上我喜欢它，所以如果点击导航按钮，下拉列表会向下滑动。

所以我有：

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

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

$scope.open_dropdown = ->

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

我的HTML

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

所以我认为我已经解决了如何隐藏/显示Angular风格的地方ng-show .dropdown的{{1}}，但我不希望它显示。它必须幻灯片。

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

问题

如何以最Angular方式向下滑动下拉列表？

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

<强>更新

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

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

Answer 2

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

用Angular做这个简单技术的最佳方法是什么？

2 个答案: