Question

我刚刚开始学习棱角分明！我的产品缩略图列表上有一个“快速查看”按钮，按钮和图像是使用角度ng-repeat生成的。我需要在点击“快速查看”时以模态显示相应的产品说明/价格等（来自我的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

单击ng-repeat拇指后，以角度显示产品信息

1 个答案: