jquery - 如何在 Angular Controller 中使用 Typeahead JS 定位 Bootstrap 模式

Question

我使用的是 Bootstrap、typeahead JS 和 angular。我无法从 Angular Controller 中的 typeahead 模板中定位 Bootstrap 模式。它无法识别必须以 HTML 中的模态为目标的页脚中的 Angular 表达式。这可能与不识别 Angular 表达式的模板有关。

所以，我想从模板的页脚定位 BS 模态。是否有适当的解决方案来完成这项工作？

查看我的代码:

    <div id="something{{some.id}}" class="modal fade bs-example-modal-sm"    tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                   header here...
                </div>
                <div class="modal-body">
                    content here...
                </div>
                <div class="modal-footer">
                   footer here...
                </div>
            </div>
         </div>
    </div>    



// code in angular controller:

    events.initialize();
    $scope.eventsDataset = {
        name: 'events',
        displayKey: 'title',
        source: events.ttAdapter(),
        templates: {
            empty: 'this is empty',
            suggestion: Handlebars.compile ('<p>{{title}}</p>'),
            footer: '<p class="footer" data-toggle="modal" data-target= "#something{{some.id}}">you can click here..</p>'
        }
    };
    $scope.exampleOptions = {
        highlight: true
    };`enter code here`

Answer 1

Remove the # in the id attribute for your modal window div.

作为侧节点，为页脚提供如下所示的结构而不是字符串。在我看来，它将更具可读性和可维护性。

footer: function() {
  return $('<p></p>')
    .addClass('footer')
    .attr('data-toggle', 'modal')
    .attr('data-target', '#something1')
    .html('click me');
}

这是一个 demo 显示相同

希望这对您有所帮助。