我有一个关于 Angular UI-Router 及其 ui-views 的问题。我在另一个 View 中声明了三个 ui View ，唯一显示的是名为“语言”的 View 。我不明白为什么会发生这种情况，如果有人能提供帮助那就太好了。
index.html:
<div ui-view="languages">
<div ui-view="dashboard"></div>
<div ui-view="partners"></div>
<div ui-view="footer"></div>
</div>
routes.js:
angular.module('TMHM')
.config(routeConfig);
routeConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function routeConfig ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
views: {
'languages': {
templateUrl: 'views/languages/languages.html'
},
'dashboard': {
templateUrl: 'views/dashboard/dashboard.html'
},
'partners': {
templateUrl: 'views/partners/partners.html'
},
'footer': {
templateUrl: 'views/footer/footer.html'
}
}
});
$urlRouterProvider.otherwise('/');
};
这是 Plunker 代码，尽管我无法让它工作: https://plnkr.co/edit/z8cFGHKVQNN623QbBUqi
最佳答案
有更新且正在运行的插件 https://plnkr.co/edit/vKOr2yLUfaAfwoGyK0ws?p=preview
我使用此内容创建了新的routes.html
<h1>Routes</h1>
<hr />
<div ui-view="languages"></div>
<div ui-view="dashboard"></div>
<div ui-view="partners"></div>
<div ui-view="footer"></div>
并更改index.html包含
<div ui-view=""></div>
然后状态调整为:
.state('home', {
url: '/',
views: {
'': {
templateUrl: 'routes.html'
},
'languages@home': {
templateUrl: 'languages.html'
},
'dashboard@home': {
templateUrl: 'dashboard.html'
},
'partners@home': {
templateUrl: 'partners.html'
},
'footer@home': {
templateUrl: 'footer.html'
}
}
});
此外，重要的是移动 ng-app 来自 <head>至<html>元素
<html ng-app="TMHM">
<head >
检查一下here
有关命名 View 和多 View 的更多详细信息和示例:
关于javascript - 另一个里面的 ui-view 不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40465226/