Javascript 如何在AngularJS中重新加载子视图而不重新加载整个状态

我有一个状态，其中声明了多个视图，如下所示：

$stateProvider
    .state('home.details.item', {
        url: '^/details',
        views: {
          'chartsView': {
            templateUrl: 'charts.html',
            controller: 'chartsCtrl'
          },
          'gridView': {
            templateUrl: 'grid.html',
            controller: 'gridCtrl'
          },
          'detailsView': {
            templateUrl: 'details.html',
            controller: 'detailsCtrl'
          }
        }
      });

---

我需要在不重新加载整个状态的情况下重新加载其中一个视图，而不使用

$state.go（$state.current，null，{reload:true}）

，如果可能，还需要从

chartCtrl

重新加载

detailsCtrl

。这可能吗？

我想说的是，

UI路由器

解决方案应该围绕

*状态*

而不是视图构建。
（我创建）。换句话说，如果有

• 一些应而不是的视图应重新加载并
• 其他一些视图，应该重新加载

。。。它需要国家筑巢。让我们将该视图移动到子状态：

  .state('home.details.item', {
    url: '^/details',
    views: {
      'chartsView': {
        templateUrl: 'tpl.charts.html',
        controller: 'chartsCtrl'
      },
      'gridView': {
        templateUrl: 'tpl.grid.html',
        controller: 'gridCtrl'
      },
      // 'detailsView': {
      //   templateUrl: 'details.html',
      //   controller: 'detailsCtrl'
      // }
    }
  })
  .state('home.details.item.more', {
    views: {
      'detailsView@home.details': {
        templateUrl: 'tpl.details.html',
        controller: 'detailsCtrl'
      }
    }
  })

我们还需要一个状态，它将执行重新加载。我们可以使用其他方法，例如在状态

more

中使用一些更改参数，但这意味着在每次调用时更改参数值。使用此特定状态，我们可以轻松地重新加载状态

'more'

：

.state('reload', {
    parent: "home.details.item",
    views: {
      'detailsView@home.details': {
       // this controller will just redirect to 'more' and make it fresh...
       controller: ['$state', function($state) { $state.go('^.more')}],
      }
    }
 }) 

通过这些简单的控制器，我们可以完成所有需要的工作：

.controller('chartsCtrl', function ($scope, $state) {
   var childName = ".more";
   $state.go(childName); // default is a sub state 'more' 
})
.controller('detailsCtrl', function ($scope) { 
  $scope.when = Date.now();
})

有了这个：我们可以称之为重新加载细节：

<a ui-sref="reload">force reload detail view</a>