角嵌套路由无法正确加载

Question

第1期

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

我的＃/ section1 / hs（hs.html）部分仍然实现了＃/ section1 / hs / X而不是标签的＃/ section1 / hs / ov。

您可以在此处查看app.js代码。

我已经尝试过使用prefs示例和其他方法，但是它不起作用。

第2期

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

以下是本示例的代码， 我们将不胜感激。

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>

Answer 1

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

因此，直到您导航到存在的更高目录（在本例中为section1/hs/ov ，都不会加载模板。 /section1/anything/tab1将导致仍然加载tab1.html ，因为除了设置标头名称tab1.html ，该ID并未真正用于其他任何用途。

要使用templateUrl转到其他角度应用程序（该应用程序未作为依赖项注入应用程序模块声明中），您将需要重新加载页面。 如果将templateUrl设置为/templates/newapp.html并且在html中ng-href={{'newapp' | routeSegmentUrl }}" ng-href={{'newapp' | routeSegmentUrl }}" m确保省略# ，它应该起作用。