在页面模板中使用Angular ui-router State

Question

是否可以在视图中使用ui-router＆＃39; $stateProvider中定义的状态？

例如我的州看起来像这样：

$stateProvider
  .state('peoplelist', {
      template: '<people></people>',
  })

我的HTML就像这样：

<div class="header">
  <button ng-click="updateList()"></button>
</div>

<!-- peoplelist view to go here-->

<div class="footer">...</div>

我的控制器中也有这个，我希望$state.go只重新加载peoplelist状态，而不是整个页面。

vm.updateList = function() {
  $state.go($state.current, {}, { reload: 'peoplelist' });
}

这在Angular中是否完全可以？

感谢任何帮助。提前谢谢！

Answer 1

您可以为peopleList状态创建一个单独的控制器，并在状态定义中将其提及为：

$stateProvider
  .state('peoplelist', {
      template: '<people></people>',
      controller: 'peopleListController'
  })

在你的peopleListController中你可以做到

$state.reload()

重新加载该状态

此外，如果要从其他状态导航到此状态，可以使用$ state.go作为：

$state.go('peopleList')

它只会根据你的状态定义加载peopleList控制器。

你也可以将params传递给$ state.go，然后将它们传递给你的州定义。

您可以使用控制器中的$ stateParams访问它们。