【发布时间】：2016-03-10 08:43:13
【问题描述】：
我提前道歉，我不是角度专家。我正在尝试使用 ui-router 在用户个人资料页面上呈现一系列视图。以下是我目前的路线：
(function() {
'use strict';
angular
.module('app.routes')
.config(routesConfig);
routesConfig.$inject = ['$stateProvider', '$locationProvider', '$urlRouterProvider', 'RouteHelpersProvider'];
function routesConfig($stateProvider, $locationProvider, $urlRouterProvider, helper){
// Set the following to true to enable the HTML5 Mode
// You may have to set <base> tag in index and a routing configuration in your server
$locationProvider.html5Mode(false);
// defaults to dashboard
$urlRouterProvider.otherwise('/app/home');
//
// Application Routes
// -----------------------------------
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: helper.basepath('app.html'),
resolve: helper.resolveFor('fastclick', 'modernizr', 'icons', 'screenfull', 'animo', 'sparklines', 'slimscroll', 'classyloader', 'toaster', 'whirl','loaders.css', 'spinkit','jquery-ui', 'jquery-ui-widgets','weather-icons', 'skycons')
})
.state('app.home', {
url: '/home',
title: 'Home',
templateUrl: helper.basepath('home.html'),
})
.state('app.user', {
url: '/user',
title: 'User',
templateUrl: helper.basepath('user.html'),
resolve: helper.resolveFor('datatables')
})
.state('app.user.dashboard', {
url: '',
views: {
'eventTable': {
templateUrl: helper.basepath('eventTable.html'),
},
'bankStatement': {
templateUrl: helper.basepath('bankStatement.html'),
}
}
})
} // routesConfig
})();
- 应用提供一般布局。
- app.home 是所有用户的主页。
- app.user 应该是一个用户个人资料页面，其中包含通过两个视图呈现的两个表（eventTable、bankStatement）。
我不确定是否需要额外的 app.user.dashboard 状态，但我不确定如何让视图在 app.user 状态中呈现。以下是其余相关代码：
user.html
<h3>User Profile</h3>
<div ui-view="eventTable"></div>
<div ui-view="bankStatement"></div>
bankStatement.html
<div class="panel panel-default">
<div id="bankStatementHeader" class="panel-heading">Events</div>
<div class="panel-body">
<div ng-controller="EventTableController as table2">
<table datatable="ng" class="row-border hover">
<thead>
<tr>
<th>Date</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="event in table2.events">
<td>{{ event.date }}</td>
<td>{{ event.type }}</td>
<td>{{ event.description }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
eventTable.html
<div class="panel panel-default">
<div id="bankStatementHeader" class="panel-heading">Bank Statement</div>
<div class="panel-body">
<div ng-controller="BankStatementController as table1">
<table datatable="ng" class="row-border hover">
<thead>
<tr>
<th>Person ID</th>
<th>Event Date</th>
<th>Process Date</th>
<th>Details</th>
<th>Description</th>
<th>Amount</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="statement in table1.statements">
<td>{{ statement.id }}</td>
<td>{{ statement.eventDate }}</td>
<td>{{ statement.processDate }}</td>
<td>{{ statement.details }}</td>
<td>{{ statement.description }}</td>
<td>{{ statement.amount }}</td>
<td>{{ statement.balance }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
事件表控制器
function() {
'use strict';
angular
.module('app.eventTable')
.controller('EventTableController', EventTableController);
EventTableController.$inject = ['$resource', 'DTOptionsBuilder', 'DTColumnDefBuilder'];
function EventTableController($resource, DTOptionsBuilder, DTColumnDefBuilder) {
var vm = this;
activate();
////////////////
function activate() {
// Ajax
$resource('server/event-table.json').query().$promise.then(function(events) {
vm.events = events;
});
}
}
})();
银行对账单控制器
(function() {
'use strict';
angular
.module('app.bankStatement')
.controller('BankStatementController', BankStatementController);
BankStatementController.$inject = ['$resource', 'DTOptionsBuilder', 'DTColumnDefBuilder'];
function BankStatementController($resource, DTOptionsBuilder, DTColumnDefBuilder) {
var vm = this;
activate();
////////////////
function activate() {
// Ajax
$resource('server/bank-statement.json').query().$promise.then(function(statements) {
vm.statements = statements;
});
}
}
})();
任何帮助将不胜感激。谢谢
【问题讨论】：
标签： javascript angularjs angular-ui-router