指令在引导网格中很奇怪

Question

Im AngularJS新手：）。

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

HTML模板：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

指令代码：

＆＃13;

＆＃13;

'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
    };
  });

＆＃13;

＆＃13;

＆＃13;

Video added here

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