angularJs stateprovider子狀態不會加載控制器和模板

Question

我創建了一個具有以下狀態的小應用程序：

受限制的route.js

$stateProvider.state('restricted', {
  url: '/restricted',
  templateUrl: 'app/restricted/restricted.html',
  abstract: true
});

pages.route.js

$stateProvider.state('restricted.pages', {
  url: '/pages',
  templateUrl: 'app/restricted/pages/pages.html',
  controller: 'pagesController',
  controllerAs: 'vmPages'
});

detail.route.js

$stateProvider.state('restricted.pages.detail', {
    url: '/:id',
    controller: 'pageDetailController',
    controllerAs: 'vmDetail',
    templateUrl: 'app/restricted/pages/detail/detail.html'
});

app.run.js

$urlRouterProvider.otherwise('/restricted/dashboard');

當我加載URL＃/ restricted / pages時，一切正常。 控制器已加載並顯示視圖。 當我加載URL＃/ restricted / pages / 1時，將加載並執行狀態為“ restricted.pages”的控制器和視圖。 由於不執行$ urlRouterProvider.otherwise，因此可以清楚地識別該狀態。

有人知道我在這里做錯什么嗎？

謝謝！

Answer 1

我認為您的問題出在HTML上，嵌套狀態應加載到父元素的ui-view標簽中。

Answer 2

是否有意將詳細信息作為頁面（列表）狀態的子狀態？ 如果是這樣，則需要將<div ui-view></div>放入名為app/restricted/pages/pages.html的模板中。

如果這不是你的本意，我建議詳細狀態重命名為類似restricted.pages_detail為每點引入了狀態定義嵌套的水平。