Блог

Я использую ui.bootstrap.modal с шаблоном. В моем шаблоне HTML у меня есть элемент «div», который служит контейнером для стороннего компонента (SlickGrid). При инициализации моего стороннего компонента я указываю, что он содержит элемент, используя выражение выбора jQuery. Однакоселектор, похоже, не может найти мой элемент контейнера при выполнении либо из модального контроллера, либо из моей «открытой» логики обещания, разрешенной modal. Я полагаю, что проблема в том, что мой HTML-диалог еще не добавлен в DOM и, следовательно, не виден контроллеру или «открытому» обещанию. Я должен добавить, что само диалоговое окно отображается просто отлично; просто я не могу ссылаться на его элемент контейнера… любой контекст? Возможно, modal не поддерживает этот вариант использования? Любые мысли / предложения будут оценены!

Спасибо, Гарри

Если я не ошибаюсь, ваш вопрос. Вы можете использовать bs.modal.отображается в вашем модальном показанном событии

$(your-modal).on("bs.modal.shown",function(){});

У меня возникла эта проблема при использовании bootstrap-table внутри ui.boostrap.modal — когда я инициализирую свой модальный, селектор не смог найти <table> элемент и поэтому не мог быть инициализирован сам.

Ответ состоял в том, чтобы использовать rendered обещание, а не opened . rendered разрешается после добавления шаблона в DOM, позволяя вам выбирать элементы, определенные в шаблоне, как обычно.

Ниже приведен пример того, как была выполнена моя реализация:

Мой взгляд

 <div ng-controller="MyAngularController" ng-init="init()">
    <!-- The actual page content goes here - irrelevant to the example -->

    <script type="text/ng-template" id="myngtemplate.html">
        <table id="mygrid">
            <!-- My bootstrap-table column definitions here -->
        </tabie>
    </script>
</div>
  

Мой JavaScript

 // the below was implemented in my page's AngularJS controller,
// left out the controller implementation to make the example more consise

var modal = $uibModal.open({
    animation: true,
    size: 'lg',
    templateUrl: 'myngtemplate.html'
});

modal.rendered.then(function () {
    // $('#mygrid') could not find the table element before this
    $('#mygrid').bootstrapTable({
        data: getModalData()
    });
});