Question

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

$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。这可能吗？

Answer 1

我要说，UI-Router解决方案应该围绕*states*建立，而不是视图。
（我创建了working example here）。换句话说，如果有

应该不重新加载
其他一些观点，应该重新加载

...它要求进行状态嵌套。让我们将这个观点转移到子状态：

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

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

内容：

通常，UI-Router表示状态机。我强烈建议：

不要担心在 states 中思考。 Views只是他们在DOM中的代表。

如果有一些相关的功能，它们很可能代表状态。如果其他人没有联系（应经常或很少改变），他们属于其他国家。它可能是父母，孩子或兄弟姐妹......

检查here

如何在不重新加载AngularJS中的整个状态的情况下重新加载子视图

1 个答案: