我正在做一个小项目，我已经有一段时间没有使用 Angular 了。我试图分离我所有的模板/ Controller ，所以我没有一个巨大的文件，但我希望能够在一页上访问它们。我正在使用 Angular UI 路由器，并试图让它们全部加载到同一条路线上。它似乎不起作用。有谁知道我如何在一条路线上加载所有内容但仍将所有内容分开？目前它只加载我的路由文件 (createCompanyController) 中列出的第一个 Controller /模板，而不加载其他 Controller /模板。
这是我的 routes.js 文件:
(function() {
angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
var applicationStates = [{
name: 'homepage',
url: '/app',
templateUrl: 'partials/CreateCompany/createCompany.html',
controller: 'createCompanyController',
controllerAs: 'createCompanyCtrl'
},
{
name: 'guestbook',
url: '/app',
templateUrl: 'partials/CreatePerson/createPerson.html',
controller: 'createPersonController',
controllerAs: 'createPersonCtrl'
},
{
name: 'states',
url: '/app',
templateUrl: 'partials/ListCompanies/listCompanies.html',
controller: 'listCompaniesController',
controllerAs: 'listCompaniesCtrl'
}];
applicationStates.forEach(function(state) {
$stateProvider.state(state);
});
}])
})();
还有我正在使用的 index.html 文件:
<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css'/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='app.less' type='text/css' rel='stylesheet/less'>
</head>
<body class="container" ng-cloak>
<div class='row'>
<div class='span12'>
<div ui-view></div>
</div>
</div>
</body>
</html>
(我所有的脚本标签都在那里，我只是将它们从这篇文章中删除以腾出空间)。如果有人能帮助我，我将不胜感激。
最佳答案
您可以使用 Multiple Named Views
$stateProvider.state('app', {
url: '/app',
views: {
'': {
templateUrl: 'home/home.html'
},
'homepage@app': {
name: 'homepage',
templateUrl: 'partials/CreateCompany/createCompany.html',
controller: 'createCompanyController',
controllerAs: 'createCompanyCtrl'
},
'guestbook@app': {
name: 'guestbook',
templateUrl:'partials/CreatePerson/createPerson.html',
controller: 'createPersonController',
controllerAs: 'createPersonCtrl'
},
'states@app': {
name: 'states',
templateUrl:'partials/ListCompanies/listCompanies.html',
controller: 'listCompaniesController',
controllerAs: 'listCompaniesCtrl'
}
}
和 index.html
<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css'/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='app.less' type='text/css' rel='stylesheet/less'>
</head>
<body class="container" ng-cloak>
<div class='row'>
<div class='span12'>
<div ui-view="homepage"></div>
<div ui-view="guestbook"></div>
<div ui-view="guestbook"></div>
</div>
</div>
</body>
</html>
关于javascript - 在一条路线上加载多个模板/ Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48846434/