Angular 单击 ng-repeat 缩略图后以模态显示产品信息

Question

刚开始学习angular！我的产品缩略图列表中有一个 'quick view' 按钮，该按钮和图像是使用 angular ng-repeat 生成的。单击 'quick view' 时，我需要在模式中显示适当的产品 description/price 等（来自我的 json 文件），但无法显示任何内容。我想可能使用他们的产品代码来过滤产品，因为这对每个项目都是独一无二的。任何帮助将不胜感激。

我的html:

  <div ng-repeat="product in store.products">
    <div class="item col-md-3 col-xs-12">
        <div class="product-image-wrapper text-center">
            <div class="product">
                <div class="image">  
                    <div class="quickview">
                        <a title="Quick View" class="btn btn-xs  btn-quickview" data-target="#product-details-modal" data-toggle="modal" ng-click="selectedProduct = product"> Quick View </a>
                    </div><!--quickview-->
                    <a href="#"><product-image></product-image></a>
                </div><!--image-->
                <p><span class="red"><product-title></product-title></span><br>
                </p>
            </div><!--product-->
        </div><!--product-image-wrapper text-center-->
    </div><!--item col-md-3 col-xs-12-->
</div><!--ng repeat-->

× JS

(function() {
  var app = angular.module('store-products', []);

app.directive('productGallery', function($scope) {
  return {
    restrict: 'E',
    templateUrl: 'includes/product-gallery.html',
    scope: {
      product: '=',
    },
    controller: function() {
      this.current = 0;
      this.setCurrent = function(imageNumber) {
        this.current = imageNumber || 0;
      };
    },
    controllerAs: 'gallerymain'
  };
});

app.directive('productImage', function() {
  return {
    restrict: 'E',
    templateUrl: 'includes/product-image.html',
    controller: function() {
      this.current = 0;
      this.setCurrent = function(imageNumber) {
        this.current = imageNumber || 0;
      };
    },
    controllerAs: 'gallery'
  };
});

  app.directive('productTitle', function (){
    return {
      restrict:'E',
      templateUrl: 'includes/product-title.html'
      scope: {
        product: '=',
      },
    };
  });

  app.directive("productDescriptions", function() {
    return {
      restrict: 'E',
      templateUrl: "includes/product-description.html"
      scope: {
        product: '=',
      },
    };
  });

})();

JSON

[
  {
    "name": "Up in Flames",
    "description": "Covered in dragon scales, this rashguard has a full graphical back showing the flame surrounded dragon itself.",
    "price": 24.99,
    "code": "FLAME",
    "images": [
      "images/products/flames/front.jpg",
      "images/products/flames/back.jpg",
      "images/products/flames/close.jpg"
    ],
    "reviews": []
  },
]

Answer 1

在您的 ng-repeat 中设置所选产品的分配实际上在 child scope 上创建了 selectedProduct。因此，您的模态标记可能无法访问它。您可以通过将所选产品分配给对象属性:

来避免这种情况

ng-click="store.selected = product"

我还注意到您在指令定义中为产品定义了 isolated scope 变量，但没有传递产品。这应该通过 html 中的属性来完成：

<product-image product="product"></product-image>

这是一个工作演示：http://plnkr.co/edit/WKLnEaE7uU85r1CXIWlg?p=preview

Angular 单击 ng-repeat 缩略图后以模态显示产品信息

Angular display product info in modal after clicking an ng-repeat thumb

modal-dialog

angularjs

ng-repeat