Question

具有相似行为的两个菜单的示例：menu example 1 和menu example 2 两者都是用jquery实现的。如果可能的话我想要一个角度实现。我想在没有使用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

这是我的问题的一个工作小提琴： Working example

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

部分当然是使用ng-include注入的，只有你还记得那些讨厌的''。小提琴不会显示为证明概念而添加的.css文件，但这在plunker中有效。此示例还使用了最少的不那么大的CSS。我的下一步将是查看所需的许多css选择器是否可以打包而不会牺牲太多可读性。如果你jquery的人检查了所需的js代码量，而不是指令中编写的最小代码量 - 这是一个非常“令人震惊”的差异。如果我到目前为止会发布一个更好的版本，我仍然认为在点击行为之间切换是一个很好的选择添加到ui-router。

用于切换子菜单内容的Angular / UI Router-or-directive

1 个答案: