我是 AngularJS 的新手，我对我的多个视图有点挣扎。也许有人可以阐明应该如何做到这一点。
我想要实现的目标：我正在尝试实现某种文件资源管理器，其中有两列：左列包含文件夹中的所有子文件夹和文件，右列显示文件或文件夹时的详细信息被点击。当用户双击文件夹时，视图应刷新并列出子文件夹，而详细信息列应被清除。
它基本上或多或少地工作，但左栏总是在刷新，即使它不应该。而且我很确定它非常hacky，但我不知道如何改进它。
我将 ui-router 用于多个视图，将 Restangular 用于 REST 调用，在此示例中我将其替换为虚拟数据。
引导：
// app.js
var app = angular.module('explorer', ['ui.compat']);
这是我的主要模板：
// app.html
[...]
[...]
<div ui-view></div>
这是容器模板，一开始就加载：
// files.html
<div ui-view></div>
<div ui-view="details"></div>
这是左侧文件列表的模板：
// files-list.html
<table>
<thead>
<tr>
<th>Filename</th>
<th>Size</th>
<th>Modified</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="file in files">
<td><a href="#/{{ file.type }}/{{ file.id }}">{{ file.name }}</a></td>
<td>{{ file.size }}</td>
<td>{{ file.modified }}</td>
</tr>
</tbody>
</table>
这是详细信息模板：
// files-details.html
<div>{{ file.name }}</div>
这是在左栏中显示列表的第一个控制器（对不起，它是 CoffeScript）：
app.controller 'ListController', ['$scope', '$state', ($scope, $state) ->
$scope.files = [{
"id": "12", "type": "folder", "name": "testfolder", "size": "", "modified": "01.01.2000"
}, {
"id": "54", "type": "file", "name": "testfile", "size": "23kb", "modified": "01.01.2000"
}]
]
这是细节控制器：
app.controller 'DetailsController', ['$scope', '$stateParams', ($scope, $stateParams) ->
$scope.file = { "id": "54", "type": "file", "name": "testfile", "size": "23kb", "modified": "01.01.2000"};
]
这些是我凌乱的路由规则：
app.config ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) ->
$urlRouterProvider
.when('/folder', '/folder/1')
$stateProvider.state 'list', {
url: ''
views: {
'': {
templateUrl: 'files.html'
},
'column1@list': {
templateUrl: 'files-list.html'
controller: 'ListController'
},
'column2@list': {
templateUrl: 'files-detail.html'
}
}
}
$stateProvider.state 'folder', {
abstract: yes
templateUrl: 'files-list.html'
controller: 'ListController'
}
$stateProvider.state 'folder.list', {
url: '/folder/{id}'
templateUrl: 'files-list.html'
controller: 'ListController'
}
$stateProvider.state 'list.file', {
url: '/file/{childId}'
views: {
'': {
templateUrl: 'files-list.html'
controller: 'ListController'
}
'details': {
templateUrl: 'files-detail.html'
controller: 'DetailsController'
}
}
}
]