Question

我对角度很新，而且我正在尝试创建一个模态作为一个组件（尽量不使用ui-bootstrap或库）而且我无法绕过它。我的代码：

App.component('modal', {
  templateUrl: '../modal.html',
  controller: ChocoListCtrl
});

我有modal.html我想引用我的控制器，它显示购物车内的物品：

<h2>Your Cart</h2>
<div ng-if="!cart.length">
    There are no items in your cart
</div>
<div class="col-lg" ng-repeat="item in cart | unique : 'type'">
    <div class="col-md">
      <span>Type: </span>
      <strong>{{item.type}}</strong>
    </div>
    <div class="col-md">
      <strong>${{item.price}}</strong>
    </div>
    <div class="col-md">
      <span>Quantity: </span>
      <strong>{{item.quantity}}</strong>
    </div>
    <div class="col-md">
        <button ng-click="removeItem()">Remove</button>
    </div>
</div>

然而，这确实是我的知识范围。我不确定如何使模态弹出窗口工作甚至启动它。任何指导将不胜感激！

Answer 1

看起来你已经很好地定义了你的组件，你剩下要做的就是操纵触发器：

<modal ng-if="showModal"></modal>
<button ng-click="showModal = !showModal">Show Modal</modal>

这可能会根据父元素的配置而改变，但它的想法是一样的。

然后将模态设置为在弹出所需位置的方式。职位：固定等。

您可能需要考虑在附加了ng-click的模式后面放置背景以关闭模态。

如何使用角度组件创建模态？

1 个答案: