javascript - 如何在 AngularJS 中重新加载 subview 而不重新加载整个状态

Question

我有一个状态，其中声明了多个 View ，如下所示:

$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'
          }
        }
      });

我需要重新加载其中一个 View ，而不重新加载整个状态，不使用 $state.go($state.current,null , {reload: true}) ，如果可能的话，从chartCtrl 重新加载 detailsCtrl。这可能吗？

Answer 1

我想说，UI-Router 解决方案应该围绕 *states* 构建，而不是围绕 View 构建。
(我创建了 working example here )。换句话说，如果有

• 一些不应不重新加载的 View
• 一些其他 View ，应该重新加载

...它需要状态嵌套。让我们将该 View 移至子状态:

  .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 ，我们可以完成所有需要的事情:

.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>

现在，当导航到重新加载时，我们将被重定向到“更多”状态，并且我们的 View 将被重新渲染。

摘要:

一般来说，UI-Router代表状态机。我强烈建议:

Do not worry to think in states. Views are just their representation in the DOM.

如果有一些相关的特征，它们很可能代表状态。如果其他人不相关(应该经常或很少改变)，他们就属于其他状态。它可以是 parent 、 child 或 sibling ......

检查一下here