角度嵌套路线未正确加载答案

【问题标题】：Angular nested route not loading properly角度嵌套路线未正确加载
【发布时间】：2016-10-11 17:00:35
【问题描述】：

问题 #1

我正在尝试为自己定制 angular-route-provider 示例。我正在尝试为第 1 节中的每个元素实现单独分隔的选项卡。

我的部分 #/section1/hs(hs.html) 仍然为选项卡实现 #/section1/hs/X 而不是 #/section1/hs/ov。

可以看到app.js代码here。

我尝试过使用首选项示例和其他方法，但它不起作用。

问题 #2

此外，当我在 templateUrl 中使用另一个有角度的应用程序路径时，页面似乎无法正确加载（仅显示文本）。是不是因为不能在 templateUrl 中调用另一个 Angular 应用程序。我不确定这一点，因为我不是 AngularJS 专家。

以下是我的this 示例代码。任何帮助将不胜感激。

section1.html：

<li ng-repeat="i in items" 
ng-class="{active:('s1.itemInfo' |  routeSegmentStartsWith) && 
('id' | routeSegmentParams) == i}">

<a ng-href="#{{'s1.itemInfo' | routeSegmentUrl: {id: i} }}">{{i}}</a>

</li>

<li ng-class="{active:('s1.hs' | routeSegmentStartsWith)}">
<a ng-href="#{{'s1.hs' | routeSegmentUrl }}">HTML/CSS</a>
</li>

<li ng-class="{active:('s1.prefs' | routeSegmentStartsWith)}">
<a ng-href="#{{'s1.prefs' | routeSegmentUrl }}">Preferences</a>
</li>

hs.html：

<ul class="nav nav-tabs">
<li ng-class="{active: $routeSegment.contains('ov')}">
<a href="#/section1/hs/ov">Overview</a>
</li>   
</ul>

<div app-view-segment="2" class="anim" No tab selected.> </div>

【问题讨论】：

你为什么不用 ui-router 来代替，你的情况会更好

标签： javascript angularjs url-routing angular-route-segment

【解决方案1】：

如果您实际输入/section1/hs/ov，它会将您导航到正确的页面吗？您的误解是通过导航到s1.hs，标签应该来自templates/secion1/hs.html，但它被.when('/section1/:id', 's1.itemInfo') 覆盖。

因此，除非您导航到存在的更高目录（在本例中为 section1/hs/ov），否则不会加载模板。 /section1/anything/tab1 将导致仍然加载 tab1.html，因为除了设置标题名称之外，该 id 并没有真正用于任何其他用途。

要使用 templateUrl 转到不同的 Angular 应用程序，即在您的应用程序模块声明中未作为依赖项注入的应用程序，您需要重新加载页面。如果您将 templateUrl 设置为 /templates/newapp.html 并在您的 html ng-href={{'newapp' | routeSegmentUrl }}"m 中确保省略 #，它应该可以工作。

【讨论】：