Question

我正在使用UIRouter来定义我的应用路由和视图。

现在出现的问题是每次我去一条路线时，UIRouter会重新加载＆＃34;正在进行的＆＃34;中定义的每个视图。路线规则，即使是那些没有从旧路线改变的规则。这会导致控制器重置并让我感到沮丧。我不想在我的常规模板中对这些视图进行编码，我会避免使用手动<ng-include ng-if="blah">，那么还有其他解决方案吗？

这是我的路线配置。正如您所看到的，两条路线都具有相同的视图。 请注意左侧，中间和右侧视图位于home.html 内，该视图已分配给＆＃34; home＆＃34;规则。

$stateProvider
    .state('home', {
      templateUrl: 'app/components/templates/home.html',
      abstract: true,
      views: {
          'header': {
              templateUrl: 'app/components/header/headerView.html'
          },
          '': {
              templateUrl: 'app/components/templates/home.html'
          }
      }
    })
  .state('home.twitter', {
        url: '/home/twitter',
        views:{
            'left': {
                templateUrl : 'app/components/accountList/accountListView.html'
            },
            'center': {
                templateUrl : 'app/components/timeline/timelineView.html'
            },
            'right': {
                templateUrl : 'app/components/accountWallet/accountWalletView.html'
            }
        }
    })
      .state('home.link', {
        url: '/home/link',
        views:{
            'left': {
                templateUrl : 'app/components/accountList/accountListView.html'
            },
            'center': {
                templateUrl : 'app/components/timeline/timelineView.html'
            },
            'right': {
                templateUrl : 'app/components/accountWallet/accountWalletView.html'
            }
        }
    });

Answer 1

假设left和right仅在这两个状态之间共享，并且对于home的其他子项可能不同，则需要另一个抽象层以使它们与中心视图分开：

  $stateProvider
  .state('home', {
    url: '/home'
    templateUrl: 'app/components/templates/home.html',
    abstract: true,
    views: {
        'header': {
            templateUrl: 'app/components/header/headerView.html'
        },
        '': {
            templateUrl: 'app/components/templates/home.html'
        }
    }
  })
  .state('home.account', {
    url: '',
    abstract: true,
    views:{
        'left': {
            templateUrl : 'app/components/accountList/accountListView.html'
        },
        'center': {
            templateUrl : '<ui-view/>'
        },
        'right': {
            templateUrl : 'app/components/accountWallet/accountWalletView.html'
        }
    }
  })
  .state('home.account.twitter', {
    url: '/twitter',
    views:{
        'center': {
            templateUrl : 'app/components/timeline/timelineView.html'
        }
    }
  })
  .state('home.account.link', {
    url: '/link',
    views:{
        'center': {
            templateUrl : 'app/components/timeline/timelineView.html'
        }
    }
  });

当您从home.account.twitter转到home.account.link时，左右视图应保持不变。也就是说，如果你真的可以将left和right视图集成到父抽象状态而不是仅仅为它们设置一个单独的状态，那显然会更好。

Angular uiRouter重新加载模板中的每个组件

1 个答案: