javascript - 用于切换子菜单内容的 Angular/UI 路由器或指令

Question

具有相似行为的两个菜单示例:menu example 1和 menu example 2两者都是用 jquery 实现的。如果可能的话，我想要一个 Angular 实现。我想在不使用 jquery 的情况下切换我在那里看到的部分。我尝试过以下方法: http://plnkr.co/edit/yttY9PrZBdgeUZfQXXMx?p=preview --菜单/子菜单指令(在 stackoverflow 找到了 plunker)

我都考虑过修改 bootstrap 3 导航栏并希望将它与 ui-router 一起使用，但我不相信有任何简单的方法可以使用 ui-router 来实现这种状态切换相同的菜单选择。

这是向下箭头的 css:

.arrow-down {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #000;
}

任何建议表示赞赏。我只需要插入一下。

Answer 1

这是我的问题的工作 fiddle : Working example

<submenu  data-caption="Contact">
  <div class='arrow-down'></div>
  <pre><div ng-include src="'style.css'"></div></pre>
</submenu>

部分当然是使用 ng-include 注入(inject)的，只有当你还记得那些讨厌的“”时。 fiddle 不会显示为概念证明而添加的 .css 文件，但这适用于 plunker。此示例还使用了最少的 not-so-great-css。我的下一步将是看看是否可以在不牺牲太多可读性的情况下打包所需的许多 css 选择器。如果你的 jquery 家伙检查了这需要的 js 代码量，而不是指令中编写的最少代码量——这是一个相当“令人震惊”的差异。如果我能做到这一点，我会发布一个更好的版本，我仍然认为这种点击行为之间的切换将是添加到 ui-router 中的一个不错的选择。