angularjs - 如何将选项卡与单独的 Controller 一起使用？

Question

在我的 Angular 1.3 项目中，我有以下内容:

<tabset>
  <tab ng-controller="FirstTabCtrl">
    {{content}}
  </tab>
  <tab ng-controller=SecondTabCtrl">
    {{content}}
  </tab>
</tabset>

在 Angular 1.4.4 中，我收到以下错误消息:

Multiple directives [ngController, tab] asking for new/isolated scope

我试过将标签包装在 div 中，但这会破坏布局。

如何重写代码以使用 1.4.4？

这是一个描述问题的 plunker:http://plnkr.co/edit/KScdI2jAZ4BAvDL4kCfk?p=preview

Answer 1

如果您绝对不想使用路由和状态来处理选项卡，您可以重构每个选项卡指令内的内容:将 ng-controller 添加到 <tab> 元素，像这样:

<tab heading="tab 1">
    <div ng-controller="FirstCtrl">
        {{content}}
    </div>
</tab>

这是一个 plunkr显示它。这不会破坏选项卡布局，但如果它以某种方式破坏了，您始终可以使用 CSS 来处理它。