2014-01-29 24 views
0

具有類似行爲的兩個菜單的示例:menu example 1menu example 2 兩者都使用jQuery實現。如果可能,我想要一個角度實現。 我想切換我的部分,因爲你看到那裏沒有使用jquery。 我曾嘗試用下面的方法: http://plnkr.co/edit/yttY9PrZBdgeUZfQXXMx?p=preview --a菜單/子菜單指令 (plunker發現這裏計算器)用於切換子菜單內容的角度/ UI路由器或指令

我都認爲修改引導3導航欄,並希望與UI的路由器,但我用它 不相信有任何簡單的方法可以使用UI路由器來實現從 相同的菜單選擇中切換狀態。

這裏是箭頭的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; 
} 

知道的任何建議。我只需要一個推動。

+0

爲什麼不使用Plunker示例? – Merlin

+0

經過幾個星期的嘗試,我發現它非常具有挑戰性,所以如果沒有人能夠幫助我將需要尋找其他途徑。我希望有更熟練的人可以提供幫助。 – scalaGirl

回答

0

這裏是一個工作撥弄我的問題: Working example

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

諧音當然是用NG-包括且僅當你還記得那些討厭的'注射。 小提琴不會顯示爲概念驗證而添加的.css文件,但這可在plunker中使用。 此外,這個例子使用最少的不那麼偉大的CSS。我的下一步將是看看是否可以打包所需的許多css選擇器,而不會犧牲太多可讀性。如果你jQuery的人檢查了這個需要的js代碼的數量,而不是寫在指令中的最小代碼量---這是一個「令人震驚」的差異。如果我得到那麼遠的話,會發佈一個更好的版本,我仍然認爲點擊行爲之間的這種切換將是在ui-router中添加的好選擇。