a.html
<p ui-view='index'></p>
b.html
<p ui-view='content'></p>
c.html
<p>content1</p>
d.html
<p>content2</p>
a.html中綁定事件觸發content視圖切換到c.html或d.html
$stateProvider的config該怎麼配置
js裡如果手動做切換?
PHP中文网2017-05-15 16:51:32
你的問題裡缺少一些必要的上下文信息,所以我只能靠推測或猜來補充完整了
任何SPA 框架的路由系統都是一樣的:每一個路由對應著應用程式的狀態,而應用程式狀態的變化體現在URLs 的變化上;反之也是,URLs 的變化將會引起路由系統動態的刷新應用程序的狀態。
在你的例子,路由的入口只有恆定的一個 ui-view='content'
,但却要不同的视图(c.html
和 d.html
)动态的进入其中,这就意味着 c.html
和 d.html
要對應應用程式的不同狀態,路由系統才可以據此而動態的更新。
假設你的例子是這樣的:
當 /posts/show/c
的时候,ui-view='content'
显示 c.html
當 /posts/show/d
的时候,ui-view='content'
显示 d.html
於是我們才可以對應到 ui-router 裡面:
state
是 posts.show
動態片段,即 URLs 中可變的部分,對應 state
里的 url
,我把它命名为 :name
view
的入口是 content@posts.show
這樣便足以寫出絕大部分程式碼了:
angular.module('YourApp').config(function ($stateProvider) {
$stateProvider.state('posts.show', {
url: '/show/:name',
views: {
'content@posts.show': {
templateUrl: /* TODO */,
controller: ...
}
}
});
});
唯一剩下的問題是:當 :name
变化的时候,如何更新 templateUrl
?
之前說過的,URLs 的變化會引發路由系統更新應用程式的狀態,這些變化在路由系統中被保存在 $params
对象中,我们可以用该对象提取变化的部分并生成正确的 templateUrl
。這裡我寫一個助手函數來做這件事:
angular.module('YourApp').config(function ($stateProvider) {
$stateProvider.state('posts.show', {
url: '/show/:name',
views: {
'content@posts.show': {
templateUrl: getTemplateUrl,
controller: ...
}
}
});
function getTemplateUrl() {
return: 'templates/posts/' + $params.name + '.html';
}
});
ui-router 這個模組,templateUrl
不只是接收字串,也可以接收函數的回傳值。於是你可以得到:
當 /posts/show/c
的時候,/posts/show/c
的时候,templateUrl
是 templates/posts/c.html
是 templates/posts/c.html
當 /posts/show/d
的時候,/posts/show/d
的时候,templateUrl
是 templates/posts/d.html
是 templates/posts/d.html
對應的,在你 index
里的导航链接就要负责切换 /posts/show/:name
的變化,如何產生對應動態片段的連結在 ui-router 的文檔裡有,自己去找來看吧。