嵌套路線路由器

（AngularJS V1.2.0-rc.3 +角UI-路由器v0.2.0）嵌套路線路由器

在我index.html，我有以下代碼：

<div class="container" ui-view></div>

在我app.js，我有以下代碼：

$stateProvider 
    .state('projects', { 
     abstract: true, 
     url: '/projects', 
     template: '<ui-view />', 
    }) 
    // below display properly 
    .state('projects.list', { 
     url: '', 
     templateUrl: 'views/project_list.html', 
     controller: 'ProjectListCtrl' 
    }) 
    // below display properly 
    .state('projects.one', { 
     url: '/{projectId:[0-9]{1,8}}', 
     templateUrl: 'views/project_dashboard.html', 
     controller: 'ProjectCtrl' 
    }) 
    // below does not display at all 
    .state('projects.one.campaigns', { 
     url: '/campaigns', 
     template: 'I cannot seem to display this text' 
    })

我可以打下面的路線就好了：index.html/projects，index.html/projects/1，但我不能打這個路線：index.html/projects/1/campaigns

有誰知道我爲什麼不能？

獎勵積分，如果你能回答如何我可以在projects.one狀態相同的URL頁面上顯示projects.one.campaigns狀態。

來源

2013-11-01 mcranston18

的原因是因爲之前projects.one.campaigns

projects.one比賽添加projects.one抽象狀態，然後用templateUrl添加projects.one.default狀態。

.state('projects.one', { 
    url: '/{projectId:[0-9]{1,8}}', 
    abstract:true, 
    template: '<ui-view/>', 
}) 
.state('projects.one.default', { 
    url: '', 
    templateUrl: 'views/project_dashboard.html', 
    controller: 'ProjectCtrl' 
}) 
.state('projects.one.campaigns', { 
    url: '/campaigns', 
    template: 'I cannot seem to display this text' 
}

要顯示projects.one的同一頁上的廣告系列的模板，你不應該使用狀態，但指令代替，並與在同一頁上NG-顯示切換。

來源

2013-11-01 19:27:45 fabrizioM

你明白了。（一個快速類型的註釋：'projects.one.default'的url應該是一個空字符串，因爲它從projects.one – mcranston18

繼承url。固定。 – fabrizioM

「原因是因爲'projects.one'匹配'projects.one.campaigns'之前」。那是什麼意思？ –

我只花了一整天的時間來處理這個問題。

我發現，你根本不需要抽象狀態！

試試這個：的index.html：

<div class="container"><ui-view/></div>

使用指令的用戶界面視圖作爲頂層模板標籤。

現在所有的嵌套的模板包這樣的：

<ui-view> 
    <div> 
     template code 
    </div> 
</ui-view>

，現在你可以：

$stateProvider   
    .state('list', { 
     url: '', 
     templateUrl: 'views/project_list.html', 
     controller: 'ProjectListCtrl' 
    }) 
    // below display properly 
    .state('one', { 
     url: '/{projectId:[0-9]{1,8}}', 
     templateUrl: 'views/project_dashboard.html', 
     controller: 'ProjectCtrl' 
    }) 
    // below does not display at all 
    .state('one.campaigns', { 
     url: '/campaigns', 
     template: 'I cannot seem to display this text' 
    })

我需要嵌套通用的解決方案和工作原理。現在您可以輕鬆創建非常深的嵌套（例如one.campaing.group.member.note）。如果您將在頂層使用ui-view並使用ui-view包裝所有模板，則每個模板的聯繫人將替換頂層ui-view（其爲空）的內容。

來源

2014-05-23 11:12:18

嵌套路線路由器

回答

相關問題