Question

假设我有2个HTML网页，foo.html和bar.html。

内部foo.html：

<a href="/foo.html" class="selected">Open Foo</a>
<a href="/bar.html">Open Bar</a>
<!-- shared content -->
<div id="content">Nested HTML specific to Foo</div>
<!-- shared content -->

内部bar.html：

<a href="/foo.html">Open Foo</a>
<a href="/bar.html" class="selected">Open Bar</a>
<!-- shared content -->
<div id="content">Nested HTML specific to Bar</div>
<!-- shared content -->

正如预期的那样，当我点击任一页面中的链接时，它将打开相应的页面。现在，我想要“AngularJSify”，以便点击链接只会更新div#content。我试过这个：

$routeProvider
.when('/foo.html', {templateUrl:'/foo.html?onlyContent=true'})
.when('/bar.html', {templateUrl:'/bar.html?onlyContent=true'})

<div id="content" ng-view>Nested HTML specific to Foo (or Bar, depending which page you're in)</div>

但打开foo.html也会加载foo.html?onlyContent=true，这是不必要的，因为foo.html已经有了内容！

您可能会问，“为什么不使用空div#content？”因为我想（1）减少加载额外文件，以及（2）即使JS被禁用也要使内容可用。

在Backbone.js中我可以使用：

Backbone.history.start({pushState:true, silent:true});

这基本上意味着，“如果页面已经加载，请不要再次调用该路径。”我如何在AngularJS中实现这一目标？

Answer 1

内部foo.html：

<a href="/foo.html" class="selected">Open Foo</a>
<a href="/bar.html">Open Bar</a>
<div id="defaultTemplate">Nested HTML specific to Foo</div> <!-- note this -->
<div id="content" ng-view></div>

内部bar.html：

<a href="/foo.html">Open Foo</a>
<a href="/bar.html" class="selected">Open Bar</a>
<div id="defaultTemplate">Nested HTML specific to Bar</div> <!-- note this -->
<div id="content" ng-view></div>

在JavaScript中：

function routing(path, controller, template) {
    var route = {templateUrl:'/templates/' + path, controller:controller};

    if (path === window.location.pathname) {
        var defaultTemplate = $('#defaultTemplate');

        route = {template:defaultTemplate.html(), controller:controller};
        defaultTemplate.remove();
    }

    $routeProvider.when(path, route);
}

基本上意味着，“如果您打开的路线与地址栏中的路径相同，请改用当前页面中的模板”。

在AngularJS中加载模板，当前页面除外

1 个答案: