单击该项目时如何显示正确的数据。我有我的指令，当我单击时编译模板，我希望当您单击该元素数据时显示该元素而不是我的 json 中的最后一个值。例如，我有 1 2 3 项，当我单击第一项时，我想显示第一个元素的数据，而不是最后一个元素的数据。
包含属性 ng-init 和数据的 Html：
<li ng-init='product = {id: "<%=product.id%>", brand: "<%=product.name_short%>", descriptionExcerpt: "", price: "", priceBefore: "", priceDiscount: "", mainImage: "<%=raw(main_image.url(:huge))%>", masterVariant: {id: "<%=product.master.id%>"}, variants: [{id: "0", name: "ASDasd", price: "£123", available: true }, {id: "1", name: "ASDwegwagasd", price: "£13", available: false }]}' preview-product index="$index">
<div class="sd-product-container">
<div class="sd-product-image">
<a itemprop="image" href="<%= url %>">
<img src="<%= raw(image_url) if image_url %>" itemprop="image" alt="<%= product.name %>" width="244" height="244" />
</a>
<div class="sd-product-options">
</div>
</div>
<div class="sd-product-description">
<h4><%= product.brand.name.html_safe %></h4>
<span>
<%= link_to truncate(product.name_short, length: 100), url, class: 'product-name', itemprop: 'name' %>
</span>
<% if product.teaser.present? %>
<span class="sd-small-caps">
<%= link_to strip_tags(product.teaser), url %>
</span>
<% end %>
<%= render partial: 'spree/products/price', locals: { product: product, current_currency: current_currency } %>
</div>
</div>
</li>
我的指令：
(function (){
"use strict";
var app = angular.module('quickPreview');
app.directive('previewProduct', function ($compile,$templateCache) {
return {
restrict: 'A',
scope: {
index: '@'
},
link: function(scope, element, attrs) {
element.bind('click', '.sd-click-preview', function (){
var preview = angular.element($templateCache.get('quickpreview.html'));
var cpreview = $compile(preview);
element.append(preview);
cpreview(scope);
console.log(cpreview(scope));
});
}
};
});
}(window, window.angular));
我需要在其中绘制数据的模板
<script type="text/ng-template" id="quickpreview.html">
<div class="content-preview">
<div class="content-preview-inner">
<span class="full-preview"></span>
<span class="close-preview"></span>
<div class="block block-left left">
<div class="content-tabs">
<div class="tabs-content vertical">
<div class="content active" id="panel1">
<div class="content-details">
<div class="details">
<h3 class="title-product">{{product.brand}}</h3>
<h2 class="short-desc">{{product.descriptionExcerpt}}</h2>
<div class="block-price">{{product.descriptionExcerpt}}</div>
</div>
</div>
<div class="content-img">
<div class="main-img">
<img ng-src="{{product.mainImage}}" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</script>