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

我使用UIRouter来定义我的应用程序路由和视图

现在出现的问题是，每次我转到一个路由，UIRouter都会重新加载“正在进行的”路由规则中定义的每个视图，甚至是那些没有从旧路由更改的视图。这会导致控制器重置，让我很生气。 我不想在我的常规模板中对这些视图进行编码，我会避免使用手动

，那么还有其他解决方案吗

这是我的路线配置。正如您所看到的，两条路线的视图都非常相同请记住，左视图、中视图和右视图都放在home.html中，home.html被分配给“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'
        }
    }
  });

$stateProvider
.州（“家”{
url:“/home”
templateUrl:'app/components/templates/home.html'，
摘要：没错，
观点：{
“标题”：{
templateUrl:'app/components/header/headerView.html'
},
'': {
templateUrl:'app/components/templates/home.html'
}
}
})
.state（'home.account'{
url:“”，
摘要：没错，
观点：{
“左”：{
templateUrl:'app/components/accountList/accountListView.html'
},
“中心”：{
templateUrl:“”
},
“对”：{
templateUrl:'app/components/accountWallet/accountWalletView.html'
}
}
})
.state（'home.account.twitter'{
url:“/twitter”，
观点：{
“中心”：{
templateUrl:'app/components/timeline/timelineView.html'
}
}
})
.state（'home.account.link'{
url:“/link”，
观点：{
“中心”：{
templateUrl:'app/components/timeline/timelineView.html'
}
}
});

---

当您从

home.account.twitter

转到

home.account.link

时，左视图和右视图应该保持不变。也就是说，如果您能够将

左视图

和

右视图

集成到父抽象状态中，而不是为它们单独设置一个状态，显然会更好。

请发布您定义的状态和转换。您应该在抽象“主页”中定义左视图、中视图和右视图state.@henrikmerlander不幸的是，我不能：左中心和右中心都包含在home.html中，这是在抽象视图中指定的。你不能在index.html中使用home.html的内容吗？看起来你需要另一个状态层，它只定义了左和右两侧。除非左视图和右视图在不同的（父）状态下是相同的，否则实际上不需要将视图模板放入状态配置中。

  $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'
        }
    }
  });