Angular UI-路由器嵌套视图功能
Angular UI-router nested views capabilities
我正在尝试学习和理解 UI-router 与 Angular 1.3.15 的功能。
我正在尝试设置一个应用程序，该应用程序包含许多具有页眉和页脚指令的视图。它还有少量不需要此设置的视图，加载的视图会占据整个页面。
因此，我似乎应该处理这种分歧 "one level down"，如下图所示。过去，我曾开发过 ui-router 应用程序，其中 index.html 使用 header/footer 指令进行编码，并使用单个 ui-view 供其他页面加载。这次我试图从一开始就把它改正。欢迎提出意见和建议。
我不确定你想知道什么。
是的，你应该按照你建议的方式处理模板中的差异：根模板应该只包含出现在所有状态上的元素。出现在某些状态上的元素应该出现在这些状态模板中，在父状态的模板中（如果有意义的话），或者在您在各种模板中重复使用的指令中。
如果您的模板有一些共同特征，但它们之间的差异不在单个 DOM 元素中，您可能想使用 named views 而不是指令。例如，也许你所有的页面顶部都有一个小工具栏，它总是有一些按钮，但其他按钮取决于你所处的状态。你可以将工具栏的不变部分放在根模板中，连同 <div ui-view="toolbar"></div>.然后，各州将定义一个名为 toolbar 的视图，其中包含一个包含他们想要添加的按钮的模板。
您可以在其模板中为该工具栏创建一个包含所有全局按钮的指令，并使用 <ng-transclude> 在每个状态的模板中添加自定义按钮，但使用命名视图似乎更简洁。
我正在尝试学习和理解 UI-router 与 Angular 1.3.15 的功能。
我正在尝试设置一个应用程序，该应用程序包含许多具有页眉和页脚指令的视图。它还有少量不需要此设置的视图，加载的视图会占据整个页面。
因此，我似乎应该处理这种分歧 "one level down"，如下图所示。过去，我曾开发过 ui-router 应用程序，其中 index.html 使用 header/footer 指令进行编码，并使用单个 ui-view 供其他页面加载。这次我试图从一开始就把它改正。欢迎提出意见和建议。
我不确定你想知道什么。
是的，你应该按照你建议的方式处理模板中的差异：根模板应该只包含出现在所有状态上的元素。出现在某些状态上的元素应该出现在这些状态模板中，在父状态的模板中（如果有意义的话），或者在您在各种模板中重复使用的指令中。
如果您的模板有一些共同特征，但它们之间的差异不在单个 DOM 元素中，您可能想使用 named views 而不是指令。例如，也许你所有的页面顶部都有一个小工具栏，它总是有一些按钮，但其他按钮取决于你所处的状态。你可以将工具栏的不变部分放在根模板中，连同 <div ui-view="toolbar"></div>.然后，各州将定义一个名为 toolbar 的视图，其中包含一个包含他们想要添加的按钮的模板。
您可以在其模板中为该工具栏创建一个包含所有全局按钮的指令，并使用 <ng-transclude> 在每个状态的模板中添加自定义按钮，但使用命名视图似乎更简洁。