1

我有一个产品列表。对于每一个，我都有按钮可以在这个 ng-view 中显示有关它的详细信息和评论。

例如，用户必须一目了然地查看所有可用产品的详细信息。

这是 HTML 列表：

<div ng-controller="ProductsApp">
    <ul>
      <li ng-repeat="product in products">
        <p>{{product.Name}}</p>
        <p>
            <a href="#/details/{{product.Id}}">Details</a>
            <a href="#/comments/{{product.Id}}">Comments</a>
        </p>
        <div ng-view="productView{{product.Id}}">
        </div>
      </li>
    </ul>
</div>

然后我的路由：

angular
    .module('ProductsApp',[])
    .config(function ($routeProvider) {
        $routeProvider.
            when('/details/:productId', {
                controller : DetailsCtrl, 
                templateUrl : 'Details.html',
                view: 'productView:productId'
            }).            
            when('/comments/:productId', {
                controller : CommentsCtrl, 
                templateUrl : 'Comments.html',
                view: 'productView:productId'
            }).

我的控制器：

function DetailsCtrl ($scope, $window, $http, DetailsList) {    
    var productId = $routeParams.productId;
    $scope.Details[productId] = DetailsList.get({'productId' : productId});
}

最后是 Details.html

<div>
    Name: {{Details[productId].Name}}
    Size: {{Details[productId].Size}}
    ...
</div>

关于它的两个问题：

  1. 这是一个正确的方法吗？还有其他方法吗？
  2. 如何获取实际 ng-view 的 productId？名称：{{Details[ productId ].Name}}

谢谢！！！

4

1 回答 1

0

可能有一种方法可以让它按照您尝试的方式工作，但我认为这是一种比您需要的更复杂的方法。Angular 似乎真的希望每个控制器一次一条路由，而解决这个问题可能会涉及一些骇人听闻的事情。

相反，请查看http://angularjs.org/首页上的选项卡示例。我会用一个指令来处理这个问题，尽管你可以不用它。像这样的东西（即兴发挥，所以这可能还不能完全按照所写的那样工作）：

<span ng-click='showDetails[$index] = true'>Details</span>
<span ng-click='showDetails[$index] = false'>Comments</span>

<div ng-show='showDetails[$index]'>Details here.</div>
<div ng-show='!showDetails[$index]'>Comments here.</div>

如果您对需要控制器的详细信息和注释有行为，那么我会使用指令。为每个（每个都有自己的控制器）编写一个指令，然后上面的内容就变成了：

<span ng-click='showDetails[$index] = true'>Details</span>
<span ng-click='showDetails[$index] = false'>Comments</span>

<details ng-show='showDetails[$index]'> data-id='{{product.id}}'></details>
<comments ng-show='!showDetails[$index]'> data-id='{{product.id}}'></comments>
于 2013-05-24T13:21:20.077 回答