我正在寻找最佳实践。
基本上我希望这样,如果您单击导航按钮,下拉菜单就会向下滑动。
所以我有:
= 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 的方式向下滑动?
最佳答案
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 规则是必需的。这就是我获取所有转换规则的地方。)
关于jquery - 使用 Angular 完成这项简单技术的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14593092/