Question

我正在尝试让我的应用运行，以便我可以更新网址，但无需重新加载整个视图。我只是想更新模型并更改URL以反映正在显示的新项目。

我正在使用此解决方案来实现此目标：http://joelsaupe.com/programming/angularjs-change-path-without-reloading/

但我有几个问题：

1）浏览器上的后退/前进按钮不再有效 - 所以我基本上需要在URL更改时更新模型，而不仅仅是在模型更改时更新URL。？

2）一旦我更新了网址而没有重新加载页面，点击其他链接，例如“图书”排序的菜单选项就不再有用了。我只能通过刷新页面让导航再次起作用。

有没有人能解决这些问题？我原以为这种行为在单页应用程序中很常见，所以我觉得我做错了。

顺便说一下，我正在使用角度路由模块，但如果能让生活更轻松，我很乐意切换到angular-ui-router模块。

编辑：添加当前代码示例

我目前在我的主app模块的.config块中有这样的东西：

$routeProvider
    .when('/books', {
        title: 'Books',
        templateUrl: CONFIG.static_url + '/html/books.html',
        controller: 'BooksCtrl',
    })
    .when('/book/:itemId', {
        title: 'Books',
        templateUrl: CONFIG.static_url + '/html/books.html',
        controller: 'BooksCtrl'
    })
    .otherwise({
        redirectTo: '/books'
});

然后，在运行块中，我从上面的链接解决方案中获取代码：

    // prevent reloading of view if reload = false
    // TODO: fix issue where back button does not reload previous view
    // TODO: fix issue where menu links no longer load page after 
    var original = $location.path;
    $location.path = function (path, reload) {
        if (reload === false) {
            var lastRoute = $route.current,
                un = $rootScope.$on('$locationChangeSuccess', function () {
                    $route.current = lastRoute;
                });
        }
        return original.apply($location, [path]);
    };

最后，当我异步更改模型以加载新项目时，我更新了URL：

// update the url
$location.path('/book/'+id, false);

AngularJS：更新URL而不加载整页

0 个答案: