AngularJS Bootstrap 弹出框按钮忽略 <BR />

Question

我们有一个 Angular Bootstrap 弹出窗口工具提示，其中包含一些 html 内容和范围变量以及弹出窗口内的一个按钮。

目前我们有 small version running in Plunkr and the popover html is being displayed correctly including all break tags.

问题似乎发生在我们运行在 Visual Studio 本地时，在呈现按钮之前识别所有中断标记，然后它似乎被完全忽略并且按钮得到落在弹出窗口的顶部：

<div>
    Name: {{ person.fullName }}
    <br />
    Dept: {{ person.deptId }}
    <br />
    Job Desc: {{ person.jobDesc}}
    <br />
    Phone:{{ person.phone}}
    <br />
    One!<br />
    Two!<br />
    Three!<br />
    <input type="button" value="Click Me" class="btn btn-default" ng-click="changeName()">

我们看到一些帖子使用了 $sce.trustAsHtml 并添加了它以及数据-html='true'

scope.htmlPopover = $sce.trustAsHtml('./HTML/popoverTemplate.html');
element[0].setAttribute('data-html', 'true');
element[0].setAttribute('uib-popover-template', "htmlPopover");
element[0].setAttribute('popover-append-to-body', 'true');
element[0].setAttribute('popover-trigger', "'click'");

这并没有解决我们的问题。

Plunk 和我们的本地项目都是运行ning Angular 1.6.2 和 Angular Bootstrap 2.5.0.

无法弄清楚为什么这在 Plunkr 中有效而不是在 Visual Studio。

我是不是漏掉了什么？

谢谢。

Answer 1

我们的 cshtml 页面中有一个 css，其中存在导致冲突的现有 .btn class。

因为我认为最后一个 css 条目获胜，我怀疑这是导致问题的原因。

我们删除该样式后，该按钮就会正确显示。

谢谢。

AngularJS Bootstrap 弹出框按钮忽略 <BR />

AngularJS Bootstrap Popover Button Ignoring <BR />

angularjs

angular-bootstrap