获取ui-router的ui-view以重新填充默认内容?

时间:2014-04-28 21:38:15

标签: angularjs angular-ui-router

如何在没有模板的情况下为ui-router的ui-view设置默认内容?

现在我有这样的事情:

<div ui-view>
  Default Content
</div>

随着状态的变化,视图会按预期更新。问题是如果我想回到“默认”视图:

$urlRouterProvider.otherwise('/');

..“默认内容”不再可用。我知道使用模板是最简单的解决方案,但我需要默认视图是可索引的。有没有办法在没有模板或类似HTML快照的情况下实现这一目标?

1 个答案:

答案 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("/");
})