Question

在我的项目中有很多组织。每个组织页面包含两个部分：带有一些组织信息的标题，必须只加载一次，以及标签区域。对于标签我使用嵌套状态。

现在提问：我可以在不重新加载organizationCtrl的情况下按标签行走吗？

router.js

$stateProvider
    .state('organization', {
        url: '/organisations/:id',
        templateUrl: 'organization/show.html',
        controller: 'organizationCtrl'
    })
    .state('organization.bio', {
        url: '/bio',
        templateUrl: 'organization/bio.html', 
        controller: 'organizationBioCtrl'
    })
    .state('organization.bio', {
        url: '/gallery',
        templateUrl: 'organization/gallery.html', 
        controller: 'organizationGalleryCtrl'
    });

组织/ show.html

<ul>
    <li ui-sref-active="selected">
        <a ui-sref="organization.bio({ id: organization.id })">Bio</a>
    </li>
    <li ui-sref-active="selected">
        <a ui-sref="organization.gallery({ id: organization.id })">Gallery</a>
    </li>
</ul>

Answer 1

即使某些州Param被更改，也会触发状态更改。因此，在我们的用户在同一组织{id}的 bio 和图库之间导航之前，organizationCtrl将不会重新加载。当用户导航到不同的组织{id}时......将触发新的状态更改， new organiaztionCtrl将会发挥作用。

但我们可以解决它。这是一个有效的plunker

我们将组织状态分为2（父/子）。一个将是组织的基础/根，而不依赖于具体组织{id}。这意味着 - 只会被实例化一次......

.state('base', {
      abstract : true,
      template: '<div ui-view=""></div>',
      controller: 'baseCtrl'
    })
    .state('organization', {
      parent : 'base',
      url: '/organisations/:id',
      controller: 'organizationCtrl'
      ...
    })
    .state('organization.bio', {
      url: '/bio',
      ...
    })
    .state('organization.gallery', {
      url: '/gallery',
      ...
    });

现在在这些链接中导航：

<ul>
  <li><a ui-sref="organization.bio(    { id: 1 })">Orga1 - Bio</a></li>
  <li><a ui-sref="organization.gallery({ id: 1 })">Orga1 - Gallery</a></li>
  <li><a ui-sref="organization.bio(    { id: 2 })">Orga2 - Bio</a></li>
  <li><a ui-sref="organization.gallery({ id: 2 })">Orga2 - Gallery</a></li>
</ul>

即使baseCtrl发生更改，

也不会对{id}进行树形化。

.controller('baseCtrl', function($scope,...) {
    // pretty stable one
})
.controller('organizationCtrl', function($scope, ...) {
    // changing with id change
})

因为基本状态是抽象，所以它不会在我们当前的模型中引入任何内容，我们只获得baseCtrl ...

请观察此工作中描述的行为plunker

在ui-router中通过嵌套状态行走而不重新加载父状态

1 个答案: