Question

使用Angular UI路由器，我的路由设置如下

$stateProvider.state('edit', {
    url: '/:file/:page',
    ...
}

如果我将路径从/ edit / file1 / page1更改为/ edit / file1 / page2，则视图不会刷新。我正在调用$ state.go，我可以轻松地重新绘制页面，但是不通过路由器运行它就像后退按钮那样不会更新路由。

有人可以建议如何更新路线以便更新视图吗？

感谢。

Answer 1

如果我在此了解您的意图，那就是让您的templateUrl基于:file和:page $stateParams。

由于您还没有显示实际使用$state.go的方式，因此我汇总了一个示例，其中显示了使用和不使用{ reload: true }的状态之间可以更改的几种方法。

angular.module('exampleApp', ['ui.router'])
  .config(function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/file1/page1');
    $stateProvider
      .state('edit', {
        url: '/:file/:page',
        controller: 'FilePageCtrl',
        templateUrl: function($stateParams) {
          return $stateParams.file + "-" + $stateParams.page + ".html";
        }
      });
  })
  .controller('FilePageCtrl', function($scope, $state) {});

以下是一些更改状态的示例链接（但如果它已经是当前状态，则不会重新运行控制器和模板）：

<a ui-sref="edit({ file: 'file1', page: 'page2' })">/file1/page2</a>

或多或少与（与ng-click内联或在控制器中内联）相同：

<a href ng-click="$state.go('edit', { file: 'file1', page: 'page2' })">/file1/page2</a>

以下两个将强制控制器和templateUrl运行，无论当前状态是否相同：

<a ui-sref="edit({ file: 'file1', page: 'page2' })" ui-sref-opts="{ reload: true }">/file1/page2</a>
<a href ng-click="$state.go('edit', { file: 'file1', page: 'page2' }, { reload: true })">/file1/page2</a>

您可以在此处详细了解如何使用动态templateUrl：https://github.com/angular-ui/ui-router/wiki#templates

以下是一个工作示例：http://plnkr.co/edit/JUgUB3I675Kh7kKkitgJ?p=preview

具有不同参数的Angular UI更新路由

1 个答案: