角度UI路由器嵌套視圖功能

Question

我想了解和了解與Angular 1.3.15 UI路由器的功能。

我想建立一個應用程序，它有許多具有頁眉和頁腳指令的視圖。它也具有較少數量的不需要此設置的視圖，加載的視圖佔據了整個頁面。

因此，似乎我應該處理這種「一層下降」的分歧，如下圖所示。在過去，我一直在使用ui-router應用程序，其中index.html使用header/footer指令編碼，而其他頁面使用單個UI視圖進行編碼。這一次，我試圖從一開始就把它弄清楚。意見和建議歡迎。

Answer 1

我不知道你想知道什麼。

是的，您應該按照您的建議來處理模板中的差異：根模板應該只包含出現在所有狀態中的元素。出現在某些狀態的元素應該在這些狀態模板上，父狀態的模板中（如果有意義的話），或者在各種模板中重用的指令中。

而不是指令，如果您的模板有一些共同的特性，您可能需要使用named views，但它們之間的差異不在單個DOM元素中。例如，也許所有頁面頂部都有一個小工具欄，總是有一些按鈕，但其他按鈕則取決於您所處的狀態。您可以將工具欄的常量部分與<div ui-view="toolbar"></div>一起放在根模板中。然後各州將定義一個名爲toolbar的視圖，並在其中添加一個帶有按鈕的模板。

您可以使用模板中的所有全局按鈕爲該工具欄指定一個指令，並使用<ng-transclude>在每個州的模板上添加自定義按鈕，但使用命名視圖看起來更清晰。