Javascript 指令采取其他指令'；删除后的数据

编辑：多亏了Simon Schüpbach，我才能够通过更改模板来解决这个问题。请参见解决方案的结尾

让我们先说一下，我们是初学者软中间的角度

在我们的一个项目中，我们正在使用angularjs 1.4.x和ng cart（）。它工作得很好，但后来我们遇到了客户的要求，这就产生了新的奇怪问题

我们将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}

            <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>

但是，一旦我们删除了第一条指令（我们得到了作用域，删除了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>

{[{item.getName（）}]}{[{item.getPrice（）|货币：$}]}
{[{attr}]}
总计：{[{item.getTotal（）| currency}]}

这是正常的行为吗？有没有办法强制指令保存自己的数据？据我所知，每个指令都有自己的作用域，因此我认为当我们删除第一个指令时，它会将数据存储在某种数组中，该数组表示“指令1数据是：”当我们删除第一个指令时，第二个指令就成为第一个指令

因此，基本上，我们是否做错了什么，或者是否有必要重新映射数据

希望情况足够清楚， 谢谢

编辑：添加html代码

编辑二:答复: 新的FS计数器模板如下所示：

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

Product_2:

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

            <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>

---

你知道吗

ng repeat

，那么你就不会有这样的问题了

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

要删除元素，只需执行以下操作

$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>

{{item.name}{{item.price | currency}
总计：{{item.price*item.quantity}

我已经添加了html模板代码。但是是的，它被包裹在一个ng重复中。从购物车中删除产品不是问题，我也尝试过简单地刷新购物车数据（保存购物车、加载购物车、将卡放入模型），但它保留了指令的数据。谢谢谁保留了指令数据？抱歉，这不是很清楚，基本上第二个产品，在删除第一个之后，以角度继承了它的数据。因此，如果产品2的数量为3，而产品1的数量为12，那么删除产品1后，产品2的数量将为12。非常感谢！我已经改变了ng的模式和价值，它的工作很好！再次感谢！