指令删除后删除其他指令的数据

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>