我在使用ui-router-tabs和ui-router-extras实现粘性标签时遇到问题，其中每个标签可以有多个子状态。
当我打开状态时，转到另一个状态，然后返回到第一个状态，相应的控制器正在重新初始化（尽管ui-router-extras调试输出表示它重新激活状态）
当我打开相同选项卡的另一个状态（兄弟状态）时，调试输出，url和html模板的请求告诉我新状态已加载，但是选项卡显示为空内容和状态的api调用未执行
这是我的州/路线配置：
$stateProvider
.state('home', {
url: '/',
templateUrl: 'modules/core/views/home.client.view.html'
})
.state('home.feed', {
abstract: true,
url: '',
template: '<div ui-view="list" ng-show="$state.includes(\'home.feed.list\')"/>'+
'<div ui-view="view" ng-show="$state.includes(\'home.feed.view\')"/>'+
'<div ui-view="profile" ng-show="$state.includes(\'home.feed.profile\')"/>',
data: {
roles: ['user', 'admin']
},
sticky: true,
deepStateRedirect: true
})
.state('home.feed.list', {
url: 'posts',
views: {
'list@home.feed': {
templateUrl: 'modules/posts/views/list-feed.client.view.html'
}
},
sticky: true
})
.state('home.feed.view', {
url: 'posts/:postId',
views: {
'view@home.feed': {
templateUrl: 'modules/posts/views/view-post.client.view.html'
}
},
sticky: true
})
.state('home.create', {
abstract: true,
url: '',
template: '<div ui-view="form" ng-show="$state.includes(\'home.create.form\')"/>',
data: {
roles: ['user', 'admin']
},
sticky: true,
deepStateRedirect: true
})
.state('home.create.form', {
url: 'create',
views: {
'form': {
templateUrl: 'modules/posts/views/create-post.client.view.html'
}
},
sticky: true
});
“home”状态包含所有选项卡和导航栏的ui-view。每个抽象状态表示一个选项卡，并包含其所有子状态的命名视图。州的第3级（例如home.feed.list）代表实际内容。
//home
<div data-ng-controller="HomeController">
<ui-view></ui-view>
<div class="navbar navbar-fixed-bottom">
<tabs data="tabData" type="tabs" justified="true" template-url="modules/core/views/custom-tab-template.client.view.html"></tabs>
</div>
</div>
//home.feed.list
<section data-ng-controller="PostsController" data-ng-init="loadPosts()">
...
</section>
//home.feed.view
<section data-ng-controller="PostsController" data-ng-init="findOne()">
...
</section>
//home.create.form
<section data-ng-controller="PostsController">
...
</section>
视图使用相同的控制器，但我已经尝试为每个视图添加一个单独的控制器。此外，我试图删除ui-router-tabs并通过url调用状态，结果相同。
示例调试输出：home.feed.list - ＆gt; home.create.form - ＆gt; home.feed.list （没有足够的声誉来发布图片）
Current transition: : {}: -> home.feed.list: {}
Before transition, inactives are: : []
After transition, inactives will be: []
Transition will exit: []
Transition will enter: ["ENTER: home", "ENTER: home.feed", "ENTER: home.feed.list"]
SurrogateFromPath: []
SurrogateToPath: ["home", "home.feed", "home.feed.list"]
I am initializing PostsController
Current state: home.feed.list, inactive states: []
Views: (__inactives.locals) / (root.locals) / (home.locals: '@' (home)) / (home.locals: '@' (home)) / (home.feed.locals: '@home' (home.feed)) / (home.feed.list.locals: 'list@home.feed' (home.feed.list))
Current transition: home.feed.list: {}: -> home.create.form: {}
Before transition, inactives are: : []
After transition, inactives will be: ["home.feed", "home.feed.list"]
Transition will exit: ["(home)", "INACTIVATE: home.feed", "INACTIVATE: home.feed.list"]
Transition will enter: ["(home)", "ENTER: home.create", "ENTER: home.create.form"]
SurrogateFromPath: ["home", "inactivate:home.feed", "inactivate:home.feed.list"]
SurrogateToPath: ["home", "home.create", "home.create.form"]
I am initializing PostsController
Current state: home.create.form, inactive states: ["home.feed.list", "home.feed"]
Views: (__inactives.locals: '@home' (home.feed), 'list@home.feed' (home.feed.list)) / (root.locals) / (home.locals: '@' (home)) / (home.locals: '@' (home)) / (home.create.locals: '@home' (home.create)) / (home.create.form.locals: 'form@home.create' (home.create.form))
Current transition: home.create.form: {}: -> home.feed.list: {}
Before transition, inactives are: : ["home.feed.list", "home.feed"]
After transition, inactives will be: ["home.create", "home.create.form"]
Transition will exit: ["(home)", "INACTIVATE: home.create", "INACTIVATE: home.create.form"]
Transition will enter: ["(home)", "REACTIVATE: home.feed", "REACTIVATE: home.feed.list"]
SurrogateFromPath: ["home", "reactivate_phase1:home.feed", "reactivate_phase1:home.feed.list", "inactivate:home.create", "inactivate:home.create.form"]
SurrogateToPath: ["home", "reactivate_phase1:home.feed", "reactivate_phase1:home.feed.list", "reactivate_phase2:home.feed", "reactivate_phase2:home.feed.list"]
I am initializing PostsController
Current state: home.feed.list, inactive states: ["home.create.form", "home.create"]
Views: (__inactives.locals: '@home' (home.create), 'form@home.create' (home.create.form)) / (root.locals) / (home.locals: '@' (home)) / (home.locals: '@' (home)) / (home.feed.locals: '@home' (home.feed)) / (home.feed.list.locals: 'list@home.feed' (home.feed.list))
当我使用3个不同的控制器时，会生成相同的输出（在每个控制器上执行“我正在初始化..”）。
答案 0 :(得分：0)
我发现了错误：
当然，我必须调整州的定义：
.state('home.feed', {
url: '',
views: {
'feed@home': {
template: '<div ui-view="list" ng-show="$state.includes(\'home.feed.list\')"></div>'+
'<div ui-view="view" ng-show="$state.includes(\'home.feed.view\')"></div>'+
'<div ui-view="profile" ng-show="$state.includes(\'home.feed.profile\')"></div>'
}
},
data: {
roles: ['user', 'admin']
},
sticky: true,
deepStateRedirect: {
default: { state: "home.feed.list" }
}
})
.state('home.create', {
abstract: true,
url: '',
views: {
'create@home': {
template: '<div ui-view="form" ng-show="$state.includes(\'home.create.form\')"></div>'
}
},
data: {
roles: ['user', 'admin']
},
sticky: true,
deepStateRedirect: true
})