指令在引导网格中工作奇怪答案

【问题标题】：directive works strange in bootstrap grid指令在引导网格中工作奇怪
【发布时间】：2016-06-17 23:15:01
【问题描述】：

我是 AngularJS 新手:)。

我有一个简单的指令来驱动一些图标弹出框。它在一个地方工作正常，但在另一个地方工作不正常（它闪烁并且弹出窗口向下移动并覆盖图标）。

HTML 模板：

<div class="row">
  <div class="col-lg-6">
    <h3 class="box-title">EMPLOYEE DETAILS</h3>
    <div class="form-group field-userinfo-username">
      <label class="control-label text-padding" for="userinfoUsername">Username</label>

      <div class="row">
        <div class="col-xs-11">
          <input type="text" id="uuserinfoUsername" class="form-control" name="userinfoUsername" readonly ng-model="model.full_name" />
        </div>
        <div class="col-xs-1">
          <form-field-information></form-field-information>
          <!-- it's not working properly-->
        </div>
      </div>
      <form-field-information></form-field-information>
      <!-- it's working properly-->
      ...

指令代码：

'use strict';

angular.module('app')
  .directive('formFieldInformation', function() {
    return {
      restrict: 'E',
      template: '<i class="glyphicon glyphicon-question-sign"  style="font-size: 16px"  uib-popover="This field describes ..." popover-title="Field information:" popover-trigger="mouseenter"></i>'
        //replace: true
    };
  });

Video added here

【问题讨论】：

标签： javascript html angularjs angular-ui-bootstrap

【解决方案1】：

您的容器 (col-xs-1) 太小，弹出窗口在显示时无法放入其中。一个简单的解决方法是popover-append-to-body="true"

代码：

template: '<i class="glyphicon glyphicon-question-sign"  style="font-size: 16px"  uib-popover="This field describes ..." popover-append-to-body="true" popover-title="Field information:" popover-trigger="mouseenter"></i>'

【讨论】：