指令刪除後刪除其他指令的數據

Question

編輯：感謝西蒙Schüpbach，我能夠通過更改模板來解決問題。查看解決方案的結尾。

讓我們先說一下，我們是在Angular中初學軟中介。

在我們的一個項目中，我們使用的是angularjs 1.4.x和ng-cart（https://github.com/snapjay/ngCart）。它工作得很好，但隨後我們面臨來自客戶的需求，產生了新的奇怪問題。

我們將fsCounter作爲指令添加到購物車頁面，以便用戶可以添加或刪除物品。這一切都很好，但用戶也可以選擇從購物車視圖中刪除一個項目。刪除按預期工作，但它似乎影響到該項目的範圍。

讓我可以很清楚的： 比方說，我們有2種產品在我們的購物車頁面，它會顯示類似的東西

Product_1  {price} {counter} {total} delete_btn 
Product_2  {price} {counter} {total} delete_btn 

每個fsCounter是它自己的範圍

return { 
    restrict: "A", 
    scope: { 
     value: "=value", 
     index: "=index" 
    }, 
    link: //other logic 

然而，當我們在視覺上和指令中刪除第一項，數據似乎發生了變化。所以我們的第二行現在將繼承第一行的計數器。 指令的數據是這樣的：

Product_1: 
itemId:3, 
quantity:2, 
{other data} 

Product_2: 

itemId:8, 
quantity:5, 
{other data} 

但是，一旦我們刪除第一個指令（我們拿到的範圍，刪除DOM元素，破壞範圍）的第二個指令現在有這樣的數據：

Product_2: 
itemId:3, 
quantity:2, 
{other data} 

這裏是模板代碼：

<div class="unItem" ng-repeat="item in ngCart.getCart().items track by $index"> 
    <div class="photo"><img src="{[{ item.getImage() }]}" alt=""></div> 
    <div class="details"> 
     <h3>{[{ item.getName() }]} <span>{[{ item.getPrice() | currency:$}]}</span></h3> 
     <md-select ng-model="attributes" placeholder="Attribut" class="select-attribut" ng-show="item.hasAttributes()" ng-change="item.updateSelected(attributes)"> 
      <md-option ng-repeat="attr in item.getAttributes()" ng-selected="attr == item.getSelected()" ng-value="attr">{[{ attr }]}</md-option> 
     </md-select> 
    </div> 

    <div class="quantity"> 
     <div fs-counter-dynamic value="itemQuantity" 
          data-min="1" 
          data-max="999" 
          data-step="1" 
          data-addclass="add-quantity" 
          data-width="130px" 
          data-itemid="{[{ item.getId() }]}" 
          data-editable 
          ng-model="itemQuantity" 
          name="quantity" id="quantity-{[{ item.getId() }]}", 
          index="{[{ item.getId() }]}" 

          ></div> 
    </div> 
    <div class="total">Total : {[{ item.getTotal() | currency }]}</div> 
    <div class="delete"><a ng-click="ngCart.removeItemById(item.getId());"></a></div> 
</div> 

這是正常的行爲呢？有沒有辦法強制指令保留自己的數據？根據我的理解，每條指令都有其自己的範圍，所以我認爲會發生的是，當我們刪除第一條指令時，它將數據存儲在某種指示「指令1數據爲：」的數組中，以及何時我們刪除第一條指令，第二條指令成爲第一條指令。

因此，基本上，我們是否做了任何錯誤的事情或者是否有重新映射數據？

希望已經夠清楚了， 謝謝！

編輯：添加HTML代碼

EDIT2：答： 新FsCounter模板看起來是這樣的：

  <div fs-counter-dynamic value="item._quantity" 
          data-min="1" 
          data-max="999" 
          data-step="1" 
          data-addclass="add-quantity" 
          data-width="130px" 
          data-itemid="{[{ item.getId() }]}" 
          data-editable 
          ng-model="item._quantity" 
          name="quantity" id="quantity{[{ item.getId() }]}" 
          ></div> 

Answer 1

你知道ng-repeat，那麼你沒有這樣的問題

<div ng-repeat="product in products"> 
    <fs-counter index="product.index" value="product.value"></fs-counter> 
</div> 

並在您的控制器中

$scope.products = [ 
    {index:1, value:"Cola"}, 
    {index:2,,value:"Fanta"} 
] 

刪除你只需要做一個元素

$scope.products.splice(0,1); 

編輯：

我建議你保存裏面ng-repeat使用該項目內的所有必要的數據。您的問題是，您將陣列中的數據與$scope中的其他數據混合在一起。您的指令中可能有$watch更改，但如果您將它們設置爲ng-repeat，則所有操作都將自動完成。

$scope.products = [ 
    {index:1, name:"Cola", price:1.50, image:"your/path.png", attributes:{...}}, 
    {index:2, name:"Fanta", price:1.40, image:"your/path.png"} 
] 

然後在你的HTML

<div class="unItem" ng-repeat="item in ngCart.products track by $index"> 
    <div class="photo"><img ng-src="item.image" alt=""></div> 
    <div class="details"> 
     <h3>{{item.name}} <span>{{item.price | currency}}</span></h3> 
    </div> 

    <div class="quantity"> 
     <div fs-counter-dynamic value="item.quantity" 
          data-min="1" 
          data-max="999" 
          data-step="1" 
          data-addclass="add-quantity" 
          data-width="130px" 
          data-itemid="item.index" 
          data-editable 
          ng-model="item.quantity" 
          name="quantity" id="{{'quantity-' + $index}}", 
          index="item.index" 

          ></div> 
    </div> 
    <div class="total">Total : {{ item.price * item.quantity | currency }}</div> 
    <div class="delete"><a ng-click="ngCart.removeItemById(item.index);"></a></div> 
</div>