Question

我想在基础popover中加载一个html模板，但我在互联网上找不到任何好的文档或类似的解决方案。我只是想知道天气这可能有一个html模板及其控制器在popover内或没有。我看到我们只是使用下面的属性在popover中加载内容：

<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>

我可以以某种方式使用范围注入html但很难有控制器。

我想为我的网站加载一个popover（使用angularJS进行构建）当用户将鼠标悬停在视频缩略图上时我想加载视频的预览图像并且鼠标悬停在popover上我想要一些按钮点击它们时执行一些操作。

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>

如何创建嵌套html内容的基础popover（模板）

1 个答案: