我有这样的项目结构:
index.html
<html>
<head></head>
<body ng-app="myApp">
<div ui-view=""></div>
</body>
</html>
bread.html
<div class="col-md-12">
This is the bread view.
<div ui-view="filters"></div>
<div ui-view="tabledata"></div>
<div ui-view="graph"></div>
</div>
bread.js
'use strict';
angular.module('myApp')
.config(function ($stateProvider) {
$stateProvider
.state('bread', {
url: '/bread',
views: {
'@': {
templateUrl: 'app/breadcrumbs/views/home.tpl.html',
},
'filters@bread': {
templateUrl: 'app/breadcrumbs/views/home1.tpl.html',
},
},
controller: 'BreadCtrl'
});
});
作为模板加载的 html 文件非常简单。仅包含段落标签。
我尝试使用嵌套 View ，但在 ui-view="filters" 中我无法加载模板。
最佳答案
基本上，您应该将 bread.html 放入状态的基本 View 中，然后从 View @ 加载 named-view > 代表此处的基本布局模板
.config(function ($stateProvider) {
$stateProvider
.state('bread', {
url: '/bread',
views: {
'@': {
//I don't know the exact bread.html url, it can be different
templateUrl: 'bread.html', //base layout which will make named-view available
},
'filters@bread': {
templateUrl: 'app/breadcrumbs/views/home1.tpl.html',
},
'tabledata@bread': {
templateUrl: 'app/breadcrumbs/views/tabledata.tpl.html',
},
'graph@bread': {
templateUrl: 'app/breadcrumbs/views/tabledata.tpl.html',
},
},
controller: 'BreadCtrl'
});
});
关于AngularJS ui-router 无法加载 templateUrl，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34297403/