Question

我必须实施在线商店。有商品清单和购物篮（所选商品清单）。我有一个带阵列的控制器：货物（已装满）和篮子（空）。我决定创建一个指令'goods-list'，它将获得商品列表作为参数并简单地呈现它，就像：

<ul class="goods">
    <li class="asset" ng-repeat="product in products">{{product.name}}</li>
</ul>

但我想实现下一个逻辑。我希望列表中的项目可以选择，点击它后，它将添加到篮子阵列，反之亦然。渲染将会是这样的：

<h3 id="basket">Basket</h3>
<goods-list products="basket"></goods-list>
<h3 id="goods">Goods</h3>
<goods-list products="goods"></goods-list>

实施它的正确方法是什么？

Answer 1

您可以在指令范围中添加一个参数：

onSelect:'&'

你会用这种方式：

<h3 id="basket">Basket</h3>
<goods-list products="basket" on-select="moveToGoods(selectedProduct)"></goods-list>
<h3 id="goods">Goods</h3>
<goods-list products="goods" on-select="moveToBasket(selectedProduct)"></goods-list>

在指令范围中，您将定义如下函数：

scope.select = function(product) {
    scope.localFn({selectedProduct: product});
};

，它将从指令模板中调用，例如：

<ul class="goods">
    <li class="asset" ng-repeat="product in products">{{product.name}} <button ng-click="select(product)">Move</button></li>
</ul>

父控制器当然必须定义两个moveToBasket（）和moveToGoods（）函数，这些函数包括从一个列表中删除产品并将其添加到另一个列表中。

AngularJS 2列为指令

1 个答案: