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

我是angular的新手，我正在尝试创建一个作为组件的模式（尝试不使用ui引导或库），但我很难理解它。我的代码：

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>

您的购物车
您的购物车中没有商品
类型：
{{item.type}}
${{item.price}}
数量：
{{item.quantity}}
去除

---

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

看起来您已经很好地定义了您的组件，您所要做的就是装配触发器：

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

显示模态

这可能会根据父元素的配置而改变，但这是相同的想法

然后对模态进行样式设置，使其在所需位置弹出。位置：固定等

---

你可能想考虑在一个模式后面放置一个背景，后面有一个NG点击来关闭模态。

一种方法是检查UI引导的源代码。您不必使用库，但通过阅读源代码可以学到很多东西。