Question

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

现在我有这样的事情：

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

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

$urlRouterProvider.otherwise('/');

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

Answer 1

我不知道使用默认内容重新填充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("/");
})

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

1 个答案: