弹出窗口，ng重复数据在ng点击后不显示

Question

我有一个按钮来显示一个弹出窗口，其中包含从服务器加载的数据：

<button ng-click="main.getFieldDescriptions()" data-placement="bottom"
data-toggle="popover" data-container="body"/>

这是我想作为popover内容显示的一个元素：

<div id="field-descriptions" class="hide" style="width:500px">
<div class="row" ng-repeat="f in main.fieldDescriptions">
<input class="form-control" readonly="true" value="{{f.fieldName}}" />
</div>
</div>

数据来自服务器，并带有get rest请求(这是我在控制器中的内容(

angular.element("#show-fields-description").popover({
html: true,
content: function () {
return angular.element("#field-descriptions").html();
}
});
this.getFieldDescriptions = function getFieldDescriptions() {
if (self.report.sysparm_table) {
return server.get(url)
.then(function getData(response) {
self.fieldDescriptions = response.result;
});
}
return null;
};

当单击按钮时，popover显示空内容，第二次单击时，它显示带有数据的popover。似乎首先显示popover，然后加载服务器值。

Answer 1

您正在将平面引导popover与angularjs混合。。。所以angularjs的$apply/edigest循环并不知道。

有很多方法

1. 模式加载时调用$apply

2. 不是在html上切换数据，而是在ng-click回调中调用.popover('show')

3. 使用angular ui引导popover

对于第一个：

$('#show-fields-description').on('shown.bs.popover', function () {
main.getFieldDescriptions();
//Need to call $scope.$apply() after data is there
})

对于第二个：

请看这个https://getbootstrap.com/docs/4.3/components/popovers/#options

从html:中删除所有其他属性

<button ng-click="main.getFieldDescriptions()"></button>

angular.element("#show-fields-description").popover({
html: true,
content: function () {
return angular.element("#field-descriptions").html();
},
container: 'body',
trigger: 'manual',
placement: 'bottom'
});

然后在此处调用show/toggle：

this.getFieldDescriptions = function getFieldDescriptions() {
if (self.report.sysparm_table) {
return server.get(url)
.then(function getData(response) {
self.fieldDescriptions = response.result;
angular.element("#show-fields-description").popover('show');
});
}
return null;
};