我正在使用ui-router用于以下目的:
1. I want load a layout template(such as left-right layout).
2. I want make left a root state, that mean's I only want change the right part.
3. I reuse this layout template(load different root state and right parts)
以下是plunker:plunker。为了实现这一点,我制作了index.html,它有一个ui-view,可以加载布局模板。我做了layout.html。然后,left.html和right.html用于根状态和内容。
app.js
app.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state("layout", {
url: '',
templateUrl: 'layout.html'
})
.state("layout.frame", {
url: '/frame',
views: {
left: {
controller: 'LeftCtrl',
templateUrl: "left.html"
}
}
})
.state("layout.frame.right1", {
url: '/right1',
views: {
'right@': {
controller: 'RightCtrl',
templateUrl: "right1.html"
}
}
})
.state("layout.frame.right2", {
url: '/right2',
views: {
'right@': {
controller: 'RightCtrl',
templateUrl: "right2.html"
}
}
});
}
]);
运行plunker,点击'left',将显示left.html,那很棒,但点击'right1'将不会加载right1.html(虽然从浏览器网络看到,加载了right1.html)
如何使right1.html加载root状态而不重载?
P.S。 对于根状态,我提到了这个问题angularjs ui-router - how to build master state which is global across app
我制作了一个单层嵌套版本(index1.html),它运行完美,但它不支持布局模板。
提前致谢。
答案 0 :(得分:0)
如果在设置正确的视图时将左侧设置为绝对视图,则可以执行此操作, 看看这个分叉的羽毛球http://plnkr.co/edit/ucHkTbRyyKPeUfYwDrJh