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

Question

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

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

如果我将路径从/edit/file1/page1 更改为/edit/file1/page2， View 不会刷新。我正在调用 $state.go，并且可以轻松地重绘页面，但是如果不通过路由器运行此操作，则后退按钮之类的内容不会更新路线。

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

谢谢。

Answer 1

如果我理解你的意图，那就是让你的 templateUrl 基于 :file 和 :page $ stateParams.

由于您尚未展示实际如何使用 $state.go，因此我整理了一个示例，展示了在使用和不使用 { 的情况下在状态之间进行更改的一些方法重新加载: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) {});

以下是一些更改状态的示例链接(但如果已经是当前状态，则不会重新运行 Controller 和模板):

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

或多或少相同(无论是与 ng-click 内联还是在 Controller 内):

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

以下两条将强制 Controller 和 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