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 的文档里有，自己去找来看吧。
