Question

我正在使用一个tabset和一组角度ui bootstrap的不同选项卡。

我想点击某个标签。此外，我想知道现在打开哪个标签。

我在服务中创建了一个名为currentTab的变量。

我的想法是当我点击标签时，当前标签会更新。我可以在选项卡之间移动，但是，我在控制台中收到一条错误消息：“与指令”{1}“一起使用的表达式”{0}“是不可分配的！”

此外，我必须绘制不同的每个标签。

有什么想法吗？

 <tabset>
    <tab active="currentService.isCurrentTabEqualsGivenName('tab1')" ng-click="currentService.setCurrentTab('tab1')">
        <tab-heading><span class="badge">3</span>  <span>Tab 1</span>
        </tab-heading>

          SOMETHING
    </tab>
     <tab active="currentService.isCurrentTabEqualsGivenName('tab2')" ng-click="currentService.setCurrentTab('tab2')">
        <tab-heading>Tab 2</tab-heading>
          SOMETHING
         </tab>
 </tabset>

CurrentService：

 app.service('CurrentService', [
              function () {

 this.currentTab = "tab1";

 this.isCurrentTabEqualsGivenName = function(name){
        return this.currentTab === name;
    };

    this.setCurrentTab = function(name){
        if (this.currentTab !== name)
            this.currentTab = name;
    };
 }]);

Answer 1

这是Angular UI团队和社区的一个已知问题，请查看https://github.com/angular-ui/bootstrap/issues/611进行全面讨论。

对我有用的解决方案是@gilluminate在https://github.com/angular-ui/bootstrap/issues/611#issuecomment-70339233提供的解决方案

我在这里发布以供完整参考：

onEndPage()

然后设置默认选项卡，如下所示：

class ParagraphBorder extends PdfPageEventHelper {
    public boolean active = false;
    public void setActive(boolean active) {
        this.active = active;
    }

    public float offset = 5;
    public float startPosition;

    @Override
    public void onStartPage(PdfWriter writer, Document document) {
        startPosition = document.top();
    }

    @Override
    public void onParagraph(PdfWriter writer, Document document, float paragraphPosition) {
        this.startPosition = paragraphPosition;
    }

    @Override
    public void onEndPage(PdfWriter writer, Document document) {
        if (active) {
            PdfContentByte cb = writer.getDirectContentUnder();
            cb.rectangle(document.left(), document.bottom() - offset,
                document.right() - document.left(), startPosition - document.bottom());
            cb.stroke();
        }
    }

    @Override
    public void onParagraphEnd(PdfWriter writer, Document document, float paragraphPosition) {
        if (active) {
            PdfContentByte cb = writer.getDirectContentUnder();
            cb.rectangle(document.left(), paragraphPosition - offset,
                document.right() - document.left(), startPosition - paragraphPosition);
            cb.stroke();
        }
    }
}

和<button class="btn" ng-click="activateTab('search')">Search</button> <button class="btn" ng-click="activateTab('preview')">Preview</button> <button class="btn" ng-click="activateTab('edit')">Edit</button> <tab heading="Search" active="active.search">...</tab> <tab heading="Preview" active="active.preview">...</tab> <tab heading="Edit" active="active.edit">...</tab>函数：

$scope.active = {
  search: true
};

Angularjs的Bootstrap选项卡

1 个答案: