Question

我有一份产品清单。对于每一个，我都有按钮在这个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>

关于它的两个问题：

这是一种正确的方法吗？还有其他办法吗？
如何获取实际ng-view的productId？姓名：{{详细信息[ productId ]。姓名}}

谢谢!!!

Answer 1

可能有一种方法可以让它按照您尝试的方式工作，但我认为这是一种比您需要的更复杂的方法。 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>

Angularjs - ng-repeat中的ng-view

1 个答案: