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

How to reload a child view without reloading whole state in AngularJS

本文关键字：新加载 加载 状态 视图 AngularJS      更新时间：2023-09-26

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

$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-Router解决方案应该围绕*states*而不是视图构建。
（我在这里创建了工作示例）。换句话说，如果有的话

  • 一些不应重新加载的视图和
  • 其他一些视图，应重新加载

。它要求状态嵌套。让我们将该视图移动到子状态：

  .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 路由器表示状态机。我强烈建议：

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

如果存在一些相关的功能，则它们很可能表示状态。如果其他人不相关（应该经常或很少改变），他们属于另一个国家。可能是父母，孩子或兄弟姐妹...

在这里查看

相关文章：