всплывающее окно с данными ng-repeat, не отображаемыми после нажатия ng - PullRequest
Новая
       22

всплывающее окно с данными ng-repeat, не отображаемыми после нажатия ng

0 голосов
/ 24 февраля 2020

У меня есть кнопка для отображения всплывающего окна с загруженными данными с сервера: 

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

данные поступают с сервера с запросом 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, затем загружаются значения сервера.

1 Ответ

1 голос
/ 24 февраля 2020

Вы смешиваете плоскость bootstrap поповер с angularjs ... поэтому цикл $ apply / digest для angularjs не знает этого.

Есть много способов.

  1. Вызов $ применяется, когда загружается модал

  2. Вместо переключения данных на html, вызовите .popover('show') в обратном вызове ng-click

  3. использовать angular пользовательский интерфейс bootstrap 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 / Переключить здесь: 

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