Question

我正在使用UI Boostrap（http://angular-ui.github.com/bootstrap）与AngularJS和Jade。我无法在加载部分时选择动态生成的集合中的第一个选项卡。这是我的代码：

div#attachments-section
   tabs
      pane(ng-repeat='attach in attachments', heading='{{attach.filename}}', active='attach.active')
         div.content
            object(width='100%', height='100%', data='{{"http://localhost/files/" + attach.content}}')

这意味着，当加载部分（#adtments-section）时，没有选择任何选项卡。我尝试为JSON集合的第一个元素（附件）中的active属性分配一个true值，但它不起作用。

检查：我已更新了我的代码（带有对象标记），因为我需要使用PDF的浏览器查看器显示每个附件。

更新我遵循@blesh建议，我意识到它在Firefox中运行良好但在Chrome中运行不正常。我在Punkler写了一个样本。

http://plnkr.co/edit/ESBWciLAKJosK2u6eZVD?p=preview

你知道它会发生什么吗？

Answer 1

我找到了！在Chrome中，您必须在对象标记中指定嵌入内容的类型。

    <div ng-controller="MainCtrl">
    <div><h2>Example</h2></div>
    <div id="attachments-section">
      <tabs>
          <pane ng-repeat="attachment in attachments" heading="{{attachment.title}}" active="attachment.active">
            <div style="height: {{objHeight}}; overflow-y: hidden;">
              <object type='application/pdf' width='100%', height='100%', data='{{attachment.filename}}'></object>
            </div>
          </pane>
      </tabs>
    </div>
</div>

现在punkler中的代码可以在任何浏览器中使用：http://plnkr.co/edit/ESBWciLAKJosK2u6eZVD

感谢您的帮助。

在UI Bootstrap中从动态加载的选项卡中激活第一个

1 个答案: