我是 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
};
});
最佳答案
您的容器 (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>'
关于javascript - 指令在引导网格中工作很奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37882273/