角度嵌套狀態不按預期方式工作

Question

有人可以看到爲什麼這不起作用嗎？ /series未加載圖庫，但/series/:id/seasons部分正在工作。 （它不是一個缺少NG-觀看問題請參見下面工作的代碼！）

angular.module('xbmcremoteApp') 
    .config(function ($stateProvider) { 
    $stateProvider 
     .state('series', { 
     url: '/series', 
     templateUrl: 'app/series/series.html', 
     controller: 'SeriesCtrl' 
     }).state('series.gallery', { 
     url: '', 
     templateUrl: 'app/series/series-gallery/series-gallery.html', 
     controller: 'SeriesGalleryCtrl' 
     }).state('series.seasons', { 
     url: '/:id/seasons', 
     templateUrl: 'app/series/seasons/seasons.html', 
     controller: 'SeasonsCtrl' 
     }); 
    }); 

如果我把它改成這樣它的工作原理，但是那不是我想要什麼：

angular.module('xbmcremoteApp') 
    .config(function ($stateProvider) { 
    $stateProvider 
     .state('series', { 
     url: '', 
     templateUrl: 'app/series/series.html', 
     controller: 'SeriesCtrl' 
     }).state('series.gallery', { 
     url: '/series', 
     templateUrl: 'app/series/series-gallery/series-gallery.html', 
     controller: 'SeriesGalleryCtrl' 
     }).state('series.seasons', { 
     url: '/series/:id/seasons', 
     templateUrl: 'app/series/seasons/seasons.html', 
     controller: 'SeasonsCtrl' 
     }); 
    }); 

編輯和soltuion：
我的文章缺少一些信息。爲了說清楚：
我想在調用/series url時顯示一個圖庫。而且我想用季節網址顯示季節。沒有更多的意見！
找到了一個非常簡單的解決方案。將抽象屬性設置爲true會強制stateprovider使用子視圖。

.... 
.state('series', { 
    abstract:true, //adding this line makes the states work as expected 
    url: '/series', 
    templateUrl: 'app/series/series.html', 
    controller: 'SeriesCtrl' 
    }) 
.... 

Answer 1

在第一定義的URL /series評價爲根狀態'series'

.state('series', { 
    url: '/series',   // url evaluation will stop here, because 
    ...      // there is a match for /series 
    }).state('series.gallery', { // this will never be reached via url 
    url: '',     // but ui-sref="series.gallery" will work 
    ... 

雖然第二映射並區分這兩種狀態，和「/系列」將導航到'series.gallery'狀態：

.state('series', { 
    url: '',     // url like "#" will navigate there 
    ... 
    }).state('series.gallery', { // url /series will trigger this child state 
    url: '/series', 
    ... 

一般來說，如果國家應該是唯一的網址，他們每個人都應該有一些定義。所以mostlikely這應該是工作爲inteded：

.state('series', { 
    url: '/',     // url like "#/" will navigate to series 
    ... 
    }).state('series.gallery', { // url '/series' will trigger this 
    url: '^/series', 
    ... 

檢查神奇的標誌：^：

• Absolute Routes (^)（舉:)

如果你想有絕對的url匹配，那麼你需要給你的url字符串加一個特殊符號'^'。