如何在没有模板的情况下为ui-router的ui-view设置默认内容?
现在我有这样的事情:
<div ui-view>
Default Content
</div>
随着状态的变化,视图会按预期更新。问题是如果我想回到“默认”视图:
$urlRouterProvider.otherwise('/');
..“默认内容”不再可用。我知道使用模板是最简单的解决方案,但我需要默认视图是可索引的。有没有办法在没有模板或类似HTML快照的情况下实现这一目标?
答案 0 :(得分:0)
我不知道使用默认内容重新填充ui-view
的直接方式,但我找到了可能对您有所帮助的解决方法:我们的想法是将ui-view
元素的内容保存在编译时间使 UI路由器将其视为常规模板。
我写了一个名为uiView
的指令,它保存了模板并且不要求你触摸html
app.directive('uiView', function($templateCache){
return {
restrict: 'EA',
compile: function (element)
{
// Saves template with ui-view element content
$templateCache.put('$index.html', element.html());
}
};
})
您还必须添加一个状态以指向已保存的模板($index.html
),并将其标记为默认状态:
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state("index",{
url: '/',
templateUrl: '$index.html' // points to saved template
})
[...] // more states
// Set `index` as default state
$urlRouterProvider.otherwise("/");
})