Angular / UI-Router - 如何在不刷新所有内容的情况下更新URL？

I'm new to both Angular and the ui-router. When someone selects a model and my controller performs a standard SHOW method, I simply want to update the URL to include the model's ID without refreshing the page, and continue on with my original view. I'm not sure how to do this...

我是Angular和ui-router的新手。当有人选择模型并且我的控制器执行标准的SHOW方法时，我只想更新URL以包含模型的ID而不刷新页面，并继续我的原始视图。我不知道怎么做...

$stateProvider
        .state('citylist', {
          url: "/",
          templateUrl: "views/index.html"
        })
        .state('cityshow', {
          url: "/city/:id",
          templateUrl: "views/index.html"
        })

angular.module('app.system').controller('IndexController', ['$scope', 'Global', 'Cities', '$stateParams', '$location', function ($scope, Cities, $stateParams, $location) {

    $scope.loadTown = function(id) {
        Cities.get({id: id }, function(city) {
             $scope.city = city
             // Change URL
             // Do things within the same view...
        });
    };
});

<button ng-click="loadTown(123456)">Chicago</button>

2 个解决方案

#1

The code snippets you've used are a bit far from the correct ui-router settings. I would suggest to you, check this demo application: http://angular-ui.github.io/ui-router/sample/#/contacts/1. Here we can see how the List is "fixed" while Detail is changed without any page refresh.

您使用的代码片段与正确的ui-router设置相差甚远。我建议你查看这个演示应用程序：http：//angular-ui.github.io/ui-router/sample/#/contacts/1。在这里，我们可以看到如何在没有任何页面刷新的情况下更改细节时如何“修复”列表。

The code of this example download here https://github.com/angular-ui/ui-router/tree/master/sample.

这个例子的代码在这里下载https://github.com/angular-ui/ui-router/tree/master/sample。

What should help a lot to understand HOW TO (except the wiki) was this code snippet: state.js. Load the demo, read through this commented explanation. And ui-router will make sense...

什么应该有很多帮助了解如何（除了维基）是这段代码片段：state.js。加载演示，阅读此注释说明。 ui-router将有意义......

#2

In essence, what you want to do is not to put the city code in the ui-view and/or not to use a template with this view. As a result, none of the DOM will get changed but the URL will. This is discussed more fully on Angular-ui.router: Update URL without view refresh

从本质上讲，您要做的不是将城市代码放在ui视图中和/或不使用具有此视图的模板。因此，没有任何DOM会被更改，但URL将会更改。这将在Angular-ui.router上进行更全面的讨论：更新URL而不进行视图刷新

#1