a.html
<div ui-view='index'></div>
b.html
<div ui-view='content'></div>
c.html
<p>content1</p>
d.html
<p>content2</p>
a.html中绑定事件触发content视图切换到c.html或d.html
$stateProvider的config应该怎么配置
js里如果手动做切换?
a.html
<div ui-view='index'></div>
b.html
<div ui-view='content'></div>
c.html
<p>content1</p>
d.html
<p>content2</p>
a.html中绑定事件触发content视图切换到c.html或d.html
$stateProvider的config应该怎么配置
js里如果手动做切换?
你的问题里缺少一些必要的上下文信息,所以我只能靠推测或猜来补充完整了
任何 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
这样便足以写出绝大部分代码了:
唯一剩下的问题是:当
:name
变化的时候,如何更新templateUrl
?之前说过的,URLs 的变化会引发路由系统更新应用程序的状态,这些变化在路由系统中被保存在
$params
对象中,我们可以用该对象提取变化的部分并生成正确的templateUrl
。在这里我写一个助手函数来做这件事情:ui-router 这个模块,
templateUrl
不只是接收字符串,也可以接收函数的返回值。于是你可以得到:当
/posts/show/c
的时候,templateUrl
是templates/posts/c.html
当
/posts/show/d
的时候,templateUrl
是templates/posts/d.html
相应的,在你
index
里的导航链接就要负责切换/posts/show/:name
的变化,如何生成对应动态片段的链接在 ui-router 的文档里有,自己去找来看吧。