javascript - 如何创建嵌套在 html 内容中的基础弹出窗口(模板)

Question

我想在 foundation popover 中加载一个 html 模板，但我在互联网上找不到任何好的文档或类似的解决方案。我只是想知道是否有可能在 popover 中有一个 html 模板及其 Controller 。 我看到我们只是使用如下属性在弹出窗口中加载内容:

<button popover="{{dynamicPopover}}"
  popover-title="{{dynamicPopoverTitle}}" class="button">Dynamic Popover</button>

或

<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="button">Mouseenter</button>

我可以使用作用域以某种方式注入(inject) html，但很难为此设置 Controller 。

当用户将鼠标悬停在视频缩略图上时，我想为我的网站(正在使用 angularJS 构建)加载一个弹出窗口我想加载视频的预览图像，当鼠标悬停在弹出窗口上我想要一些按钮单击它们时执行一些操作。

Answer 1

试试这个 http://codepen.io/Blu-Jay/pen/wMRBLx

$(document).foundation();

.callout{
  text-align:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.0.5/foundation.min.js"></script>
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet">
<div class="row">
  <div class="large-8 large-centered columns">
  <div class="callout">
  <h3>Password Verification</h3>
   <div class="row">
          <div class="small-3 columns">
            <label for="right-label" class="text-right">Username</label>
          </div>
          <div class="small-9 columns">
            <input type="text" id="right-label" placeholder="Username">
          </div>
        </div>
  
  <div class="row">
          <div class="small-3 columns">
            <label for="right-label" class="text-right">Password</label>
          </div>
          <div class="small-9 columns">
            <input type="password" id="right-label" placeholder="Password Please" data-toggle="example-dropdown-1">
          </div>
        </div>
</div>
  </div>
</div>



<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true">
        <strong>Password Must meet to following criteria:</strong>
        <ul class="no-bullet">
          <li style="color:red;">Must be between 4 and 8 characters</li>
          <li style="color:red;">Must contain capital letters</li>
        </ul>
      </div>