2

我正在尝试使用如下所示的 UI 生成以下单页应用程序：

样机布局x

左侧是项目图像列表，每当单击项目时，右侧都会填充项目的详细信息、大图等 - 你已经看到并知道我在说什么。我还想应用适当的路由，这样在访问时#/item/:itemID，视图会做出相应的响应并呈现详细的项目。项目列表仍应显示，而不更改位置（它可以垂直滚动）。

由于我对角度很陌生，我仍在研究如何解决这个问题。我正在考虑在我的路线中使用相同的模板和不同的控制器：

var app = angular.module('app', []);

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'items.html' ,
    controller: 'ItemsController'
  }).when('/item/:itemID', {
    templateUrl: 'items.html' ,
    controller: 'ItemDetailsController'
  }).otherwise({ redirectTo: '/' });
}]);

我假设我的模板应该包括视图的两侧（列表和详细信息），路由器应该调用同一个控制器，并且控制器应该检查#/item/:itemID路由并呈现详细信息视图（如果存在）。使用 获取实际项目$http，并在单击（然后呈现）时获取项目详细信息。

我还没有使用ngInclude并且ngView足够在这里选择正确的工具集，所以我很感激一些关于如何继续的输入 - 谢谢。

4

2 回答 2

3

为相同的视图或相同的局部视图使用不同的控制器将是多余的。相反，您应该对两条路线使用相同的控制器，例如

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'items.html' ,
    controller: 'ItemsController'
  }).when('/item/:itemID', {
    templateUrl: 'items.html' ,
    controller: 'ItemsController'
  }).otherwise({ redirectTo: '/' });
}]);

因此，当导航到/您的

$selectedItem = null;

尽管/item/1

$selectedItem = Item.get({ id:$routeParams.itemId })

将使用项目详细信息加载详细信息视图。

于 2013-05-31T14:50:45.770 回答
1

有很多方法可以解决这个问题，但如果应用程序相当简单：

<!-- Static content here -->
<div ng-repeat="image in imageLinks">
    <div (ul/li, whatever) href="/myRouting/{{image.id}}">{{image.image}}</div>
</div>
<-- End Static Content --->

<div class="middleContentWrapper">
    <div ng-view ></div> <----your 'content area'
</div>

或者为菜单层创建一个指令。

而且，就像另一个答案所说，一个控制器足以处理部分视图。

使用 $http 获取实际项目，并在单击（然后呈现）时获取项目详细信息。

无论如何，您可能正在这样做，但我会通过将这些项目插入工厂/服务中的数组或对象来缓存这些项目，这样您就不必一直访问服务器......

于 2013-05-31T15:03:19.287 回答