Question

我是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>

Answer 1

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

此示例的代码在此处下载https://github.com/angular-ui/ui-router/tree/master/sample。

如何理解（wiki除外）这段代码片段应该有什么帮助： state.js 。加载演示，阅读此注释说明。 ui-router会有意义......

Answer 2

从本质上讲，您想要做的是不将城市代码放在ui视图中和/或不使用此视图的模板。因此，没有任何DOM会被更改，但URL将会更改。这在Angular-ui.router: Update URL without view refresh

上有更全面的讨论

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

2 个答案: