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

时间:2014-12-23 21:27:57

标签: javascript angularjs angular-ui-router

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

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

1 个答案:

答案 0 :(得分: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