ng-click 后未显示 ng-repeat 数据的弹出窗口

Question

我有一个按钮来显示从服务器加载的数据的弹出框：

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

这是一个我想显示为弹出框内容的元素：

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

数据来自服务器并带有获取休息请求（这是我在控制器中的内容）

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首先显示，然后加载服务器值。

Answer 1

您正在将平面引导弹出窗口与 angularjs 混合......所以 angularjs 的 $apply/digest 循环不知道它。

有很多方法。

1. 模态加载时调用 $apply

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

3. 使用 Angular ui 引导弹出框

对于第一个：

$('#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;
};