Question

我仍然使用Twitter bootstrap创建网站。我计划有一个包含学生评估的选项卡，但即使ID正确，我的标签内容也在混合。例如，尽管我没有遗漏任何开始和结束标签，但在其他标签中可以看到付款历史记录的内容。那里的值仍然是虚拟数据。这是代码：

<section id="main-content" " ng-controller="studCtrl">
        <section class="wrapper">
            <div class="content-panel"> 
                <div class="row mt">
                    <div class="col-lg-12">
                        <h2>Student's Assessment</h2>
                        <ul class="nav nav-pills">
                            <li class="active"><a href="#distribution" data-toggle="tab">Distribution</a></li>
                            <li class=""><a href="#misc-fees" data-toggle="tab">Miscellaneous Fees</a></li>
                            <li class=""><a href="#other-fees" data-toggle="tab">Other Fees</a></li>
                            <!--<li class=""><a href="#iMent" data-toggle="tab">Installment Fees</a></li-->
                            <li class=""><a href="#payment-hist" data-toggle="tab">Payment History</a></li>
                        </ul>

                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="distribution">
                                <div class="table-responsive">
                                            <table class="table table-striped table-bordered table-hover">
                                                <thead>
                                                    ...
                                                </thead>
                                                <tbody>
                                                    ...
                                                </tbody>
                                            </table>
                                        </div><!--table-responsive-->
                            </div>
                            <div class="tab-pane fade" id="misc-fees">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered table-hover">
                                        <thead>
                                            ...
                                        </thead>
                                        <tbody>
                                            ...
                                        </tbody>
                                    </table>
                                </div><!--table-responsive--> 
                            </div>

                            <div class="tab-pane fade" id="other-fees">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered table-hover">
                                        <thead>
                                            ...
                                        </thead>
                                        <tbody>
                                            ...
                                        </tbody>
                                    </table>
                                </div>
                            </div>



                            <div class="tab-pane fade" id="payment-hist">
                                payment history
                            </div><!--payment history-->

                        </div><!-- end of tab content-->

                    </div><!--col-lg-12-->
                </div> <!--row mt-->
             </div><!--content-panel-->
        </section><!--/wrapper -->
    </section> <!--main-content-->

Answer 1

bootstrap.directive('popOver', function ($compile) {
        var itemsTemplate = "<ul class='unstyled'><li ng-repeat='item in items'>{{item}}</li></ul>";
        var getTemplate = function (contentType) {
            var template = '';
            switch (contentType) {
                case 'items':
                    template = itemsTemplate;
                    break;
            }
            return template;
        }
        return {
            restrict: "A",
            transclude: true,
            template: "<span ng-transclude></span>",
            link: function (scope, element, attrs) {
                var popOverContent;
                if (scope.items) {
                    var html = getTemplate("items");
                    popOverContent = $compile(html)(scope);                    
                }
                var options = {
                    content: popOverContent,
                    placement: "bottom",
                    html: true,
                    title: scope.title
                };
                $(element).popover(options);
            },
            scope: {
                items: '=',
                title: '@'
            }
        };
    });

此处的代码还有一个双引号。首先，你应该删除标志。

但是如果删除标志后仍然无法正常工作，我建议你可以使用浏览器中的dev工具检查DOM结构（chrome / firefox /...）。

twitter bootstrap选项卡的内容正在混合

1 个答案: