带有 ng-repeat 数据的弹出框在 ng-click 后不显示

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

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

Answer 1

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

有很多方法。

加载模式时调用 $apply
而不是 html 上的数据切换，而是在 ng-click 回调中调用 .popover('show')
使用angularuibootstrap弹出框

第一个：

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

带有 ng-repeat 数据的弹出框在 ng-click 后不显示

popover with ng-repeat data not showing after ng-click

jquery

popover

twitter-bootstrap

angularjs

有很多方法。

第一个：

第二个：