そのアイテムをクリックしたときに正しいデータを表示するにはどうすればよいですか。クリックするとテンプレートをコンパイルするディレクティブがあり、その要素データをクリックすると、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>