AngularJS ui-router: reload:true也会重新加载父状态

Question

在这个plunk中，您有两个ui-router状态，一个是父状态，一个是子状态。当单击链接调用子状态时，由于它具有reload:true选项，因此它总是重新加载。这很好，但问题是父状态也被重新加载了。尝试多次单击'Populate 11'链接，您会发现父时间戳也发生了更改。

如何只重新加载子状态？

Javascript:

var app = angular.module("app", ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/");

  $stateProvider
    .state('state1', {
          templateUrl: 'state1.html',
          controller: function($scope) {

            $scope.theTime1 = Date.now();

          }
    })
    .state('state1.state11', {
          templateUrl: 'state11.html',
          controller: function($scope) {

               $scope.theTime11 = Date.now();

         }
    });

});

- ps0604

Answer 1

其实非常简单。

不要使用reload，因为它会完全重新加载路由。

相反，给你的子路由添加一个参数，并确保每次单击链接时更改该参数。这将强制重新加载子状态。

我在您的plunk中更新了一个示例。 我只添加了一个num参数，并每次单击链接时增加一个count变量。

http://plnkr.co/edit/qTA39rrYFYUegzuFbWnc?p=preview

- Reactgular

Answer 2

Mathew Foscarini建议，一个可变参数是（肯定）正确的选择。还有另一种解决方案，使用状态重新加载器技术。在this updated plunker中，我们可以看到简化版本，但我们甚至可以传递一些参数以使其更通用。

.state('state1.reloader', {
      controller: function($state) {
        $state.go('state1.state11')
      }
})

我们可以这样调用它：

// instead of this
<a href="#" ui-sref="state1.state11" ui-sref-opts="{reload: true}">
// we can do this
<a href="#" ui-sref="state1.reloader" >

在这里检查

- Radim Köhler