2016-11-04 132 views
0

我正在尋找使用Angular 1.5 Components構建類似於展開摺疊的東西。這個想法是你可以連續放置一個或多個,或者你可以嵌套它們來創建一棵樹。因此,有效的HTML可能看起來像:Angular 1.5遞歸嵌套組件

<expand-collapse title="This is my title"> 
    <p>This is my content</p> 
</expand-collapse> 

或者

<expand-collapse title="Level 1 Title"> 
    <expand-collapse title="Level 2 Title"> 
     <p>This is my content</p> 
    </expand-collapse> 
</expand-collapse> 

所以,我的問題是我是否能與方法相關的角1.5組件(不是指令)做到這一點二級展開崩潰可能意識到它的父級展開崩潰。一般來說,當你喜歡這個巢成分,我認爲你會是這樣的:

component('expandCollapse', { 
    ... 
    require : { 
     parentCtrl : "^expandCollapse" 
    } 
    ... 

但是A)嵌套在此情況下必須的,B)parentCtrl結束是一個永無止境的遞歸引用當前$ CTRL。

這是可以用組件完成的事情嗎?還是因爲某種原因被明確禁止?

+0

可能您是否在尋找帶transclude選項的指令? – Hoyen

+0

嗯,我特別想用組件做,而不是指令。我正在使用transclude,但這並不能解決我希望的方式。 – LoganBlack

回答

0

我只看到兩個辦法:

  • 定義要求precendent級每一級指令,這可能會導致不必要的代碼。
  • 搜索使用角功能:element.parent().controller('expand-collapse');。這種方法通常不被推薦,但我沒有看到比這更簡單/更清潔的東西。
+0

感謝您的回覆。 #1會將我限制在X層,我想不惜一切代價避免這些X層。 #2是我所有想到的,但我希望有更清潔的東西。 – LoganBlack

+0

@LoganBlack用戶界面人機工程學規則可能會規定,可能在5層甚至3層的情況下,你做錯了。 – Walfrat

+0

是的,但仍然不是我想要施加的限制。 – LoganBlack