Question

我正在使用 ui.bootstrap.modal 和templateUrl。在我的模板HTML中，我有一个“div”元素，用作第三方组件（SlickGrid）的容器。初始化我的第三方组件时，我使用jQuery选择器表达式指定它包含元素。但是，当从模态控制器内部执行时，或者在由模态解析的“打开”的promise逻辑中执行时，选择器似乎无法找到我的容器元素。我认为问题是我的对话框HTML尚未添加到DOM中，因此对控制器或“已打开”的承诺不可见。我应该补充一点，对话框本身渲染得很好;只是我不能从......任何上下文中引用它的容器元素？也许莫代尔不支持这个用例？任何想法/建议将不胜感激！

谢谢，加里

Answer 1

如果我没有弄错你的问题。您可以在模态显示的事件中使用bs.modal.shown

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

Answer 2

在 ui.boostrap.modal 中使用 bootstrap-table 时出现此问题 - 当我初始化模态时，选择器无法找到<table>元素＆amp;所以无法自己初始化。

答案是使用rendered承诺，而不是opened。将模板添加到DOM后，rendered会解析，允许您像平常一样选择模板中定义的元素。

以下是我的实施方式的示例：

我的观点

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

ui.bootstrap.modal模板元素不可选？

2 个答案: