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

【问题标题】：How to create a modal using angular components?如何使用角度组件创建模态？
【发布时间】：2017-06-13 14:01:11
【问题描述】：

我对 Angular 还是很陌生，我正在尝试创建一个模态组件作为组件（尽量不使用 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>

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

【问题讨论】：

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

标签： javascript angularjs angularjs-scope angular-components

【解决方案1】：

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

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

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

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

您可能需要考虑在模态后面放置一个背景，该背景附有一个 ng-click 以关闭模态。

【讨论】：