指令在 bootstrap 网格中工作很奇怪

Question

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

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

指令在 bootstrap 网格中工作很奇怪

directive works strange in bootstrap grid

html

javascript

angularjs

angular-ui-bootstrap