Angular 嵌套路由未正确加载

Question

第 1 期

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

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

您可以看到 app.js 代码 here。

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

第 2 期

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

下面是我的代码 this example.Any 帮助将不胜感激。

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，但它被 .when('/section1/:id', 's1.itemInfo') 覆盖了。

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

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

Angular 嵌套路由未正确加载

Angular nested route not loading properly

javascript

url-routing

angularjs

angular-route-segment