javascript - 指令在删除后获取其他指令的数据

Question

编辑:感谢 Simon Schüpbach，我能够通过更改模板来解决问题。解决方案见文末。

首先，我们是 Angular 软中介的初学者。

在我们的一个项目中，我们使用的是 angularjs 1.4.x 和 ng-cart ( https://github.com/snapjay/ngCart )。它工作得很好，但随后我们遇到了客户的需求，这产生了新的奇怪问题。

我们将 fsCounter 作为指令添加到购物车页面，以便用户可以添加或删除商品。这一切都很好，但用户也可以选择从购物车 View 中删除项目。删除按预期工作，但它似乎影响了发生它的项目的范围。

让我说得更清楚:假设我们的购物车页面中有 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 代码

编辑2:回答:新的 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>

在你的 Controller 中

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