我在AngularJS中使用UI路由器并使用我的嵌套视图，我有多个级别的状态，但有一次我无法触发我的UI视图。 这是我的州定义：
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('guest-abstract', {
abstract: true,
views: {
'@': { templateUrl: 'partials/toolbar',
controller: 'BaseController',
controllerAs: 'baseCtrl'
}
}
})
.state('guest-abstract.home',{
url: '/home',
views: {
'choosing': {
templateUrl: 'partials/home',
controller: 'choosingController',
controllerAs: 'chooseCtrl'
}
}
})
.state('guest-abstract.cinemas',{
url: '/cinemas',
resolve: {
initialData: function(CinemasService){
//console.log(CinemasService.loadAllCinemas());
return CinemasService.initialCinemasCtrlData();
}
},
views: {
'cinemas': {
templateUrl: 'partials/cinemas',
controller: 'CinemasController',
controllerAs: 'cinemasCtrl'
}
}
})
.state('guest-abstract.theatres',{
url: '/theatres',
resolve: {
initialData: function(TheatresService){
// console.log(TheatresService);
return TheatresService.initialTheatresCtrlData();
}
},
views: {
'theatres': {
templateUrl: 'partials/theatres',
controller: 'TheatresController',
controllerAs: 'theatresCtrl'
}
}
})
.state('success',{
url: '/success',
templateUrl: 'partials/successMessage',
controller: 'UserController',
controllerAs: 'sCtrl'
})
.state('badToken',{
url: '/badToken',
templateUrl: 'partials/badtoken',
})
.state('login',{
url: '/login',
templateUrl: 'partials/login',
controller: 'LoginController',
controllerAs: 'loginCtrl'
})
.state('registration',{
url: '/registration',
templateUrl: 'partials/registration',
controller: 'UserController',
controllerAs: 'regCtrl'
})
.state('guest-abstract.profile-abstract', {
url: '/:username',
abstract: true,
views: {
'profilePage': {
templateUrl: 'partials/profilePage'
}
}
})
.state('guest-abstract.profile-abstract.profile-overview', {
url: '/overview',
resolve: {
initialData: ['$stateParams', 'UserService',function($stateParams, UserService){
return UserService.getUser($stateParams.username);
}]
},
views: {
'overview': {
templateUrl: 'partials/profileOverview',
controller: 'ProfileController',
controllerAs: 'profCtrl'
}
}
})
.state('guest-abstract.profile-abstract.profile-abstract-friends', {
url: '/friends',
abstract: true,
views: {
'friends': {
templateUrl: 'partials/friends',
}
}
})
.state('guest-abstract.profile-abstract.profile-abstract-friends.friends-list', {
url: '/friendsList',
resolve: {
initialData: ['$stateParams', 'FriendsService',function($stateParams, FriendsService){
console.log("Usao je u resolve");
console.log($stateParams.username);
console.log(FriendsService.initialFriendsCtrlData($stateParams.username));
return FriendsService.initialFriendsCtrlData($stateParams.username);
}]
},
views: {
'friendsList@guest-abstract.profile-abstract.profile-abstract-friends': {
templateUrl: 'partials/friendsList',
controller: 'FriendsController',
controllerAs: 'friendsCtrl'
}
}
})
.state('guest-abstract.profile-abstract.profile-abstract-friends.friends-search', {
url: '/friendsSearch',
resolve: {
initialData: ['$stateParams', 'FriendsService',function($stateParams, FriendsService){
console.log("Usao je u resolve");
console.log($stateParams.username);
console.log(FriendsService.initialFriendsCtrlData($stateParams.username));
return FriendsService.initialFriendsCtrlData($stateParams.username);
}]
},
views: {
'friendsSearch': {
templateUrl: 'partials/friendsSearch',
controller: 'FriendsController',
controllerAs: 'friendsCtrl'
}
}
})
.state('guest-abstract.settings-abstract', {
url: '/settings',
abstract: true,
views: {
'settingsPage': {
templateUrl: 'partials/settingsPage'
}
}
})
.state('guest-abstract.settings-abstract.general', {
url: '/general',
resolve: {
initialData: ['$stateParams', 'UserService',function($stateParams, UserService){
return UserService.getUser($stateParams.username);
}]
},
views: {
'general': {
templateUrl: 'partials/generalSettings',
controller: 'ProfileController',
controllerAs: 'settingsCtrl'
}
},
params: {
username:null
}
})
.state('guest-abstract.settings-abstract.security', {
url: '/security',
resolve: {
initialData: ['$stateParams', 'UserService',function($stateParams, UserService){
return UserService.getUser($stateParams.username);
}]
},
views: {
'general': {
templateUrl: 'partials/securitySettings',
controller: 'ProfileController',
controllerAs: 'securityCtrl'
}
},
params: {
username: null
}
})
但是当我把这样的状态放在一起时它会很好
.state('friendsList2',{
url: '/friendsList2',
templateUrl: 'partials/friendsList',
controller: 'FriendsController',
controllerAs: 'friendsCtrl',
resolve: {
initialData: ['$stateParams', 'FriendsService',function($stateParams, FriendsService){
console.log("Usao je u resolve");
console.log($stateParams.username);
console.log(FriendsService.initialFriendsCtrlData($stateParams.username));
return FriendsService.initialFriendsCtrlData($stateParams.username);
}]
},
params: {
username: null
}
})
$urlRouterProvider.otherwise('/home');
}]);
在我的index.ftl中我只是：
<div ui-view></div>
在下一个州，我有：
<div ui-view='choosing'></div>
<div ui-view='cinemas'></div>
<div ui-view='theatres'></div>
<div ui-view='profilePage'></div>
<div ui-view='settingsPage'></div>
在state-abstract.profile-abstract中，我有：
<div ui-view='overview'></div>
<div ui-view='friends'></div>
状态：
＆＃39;客体 - abstract.profile-abstract.profile抽象-朋友＆＃39;
我有<div iu-view="friendsList"></div>
这就是没有触发UI视图的地方，但当我在没有父母的情况下使用该模板创建状态时，它完美地工作了。
如果有人能帮助我的话，几个小时的烦恼让我感激不尽！对于任何其他信息，我在这里，谢谢。
ps，我已经尝试了所有可能的命名组合。