角度基础选项卡显示错误的内容和带有 ng-if 的活动选项卡

Question

我正在使用Angular-Foundation向页面添加一些选项卡。有些选项卡有条件 ng-if，有些则没有。没有 ng-if 的选项卡似乎首先呈现并成为默认显示，即使我希望另一个选项卡首先呈现。

此外，当条件更改时，内容并不总是更改为正确的选项卡。

我尝试使用 javascript 来渲染选项卡，但不幸的是，我使用 Jade 作为我的视图，并且内容是模板的包含，javascript 无法正确呈现。

第一个选项卡集的示例。内容将默认为"第三个"选项卡，而 ng-if 将计算表达式。

<tabset type="navType">
  <tab heading="First Tab" ng-if="!hideTab">First Content</tab>
  <tab heading="Second Tab" ng-if="hideTab">Second Content</tab>
  <tab heading="Third Tab">Third Content</tab>
</tabset>

另一个选项卡集。第三个选项卡上的黑客将允许首先显示第一个或第二个选项卡和内容，但在切换 hideTab 后，它再次默认为第三个选项卡。

<tabset type="navType">
  <tab heading="First Tab" ng-if="hideTab">First Content</tab>
  <tab heading="Second Tab" ng-if="!hideTab">Second Content</tab>
  <tab heading="Third Tab" ng-if="!hideTab || hideTab">Third Content</tab>
</tabset>

也许我使用选项卡不正确？

我在这里创建了一个 plunker：http://plnkr.co/edit/m1mxgo1Q872AnKaOJ5fe?p=preview

Answer 1

分叉你的 plnkr

您需要将 hideTab 布尔值包装到一个对象。 Tabset 指令创建一个新作用域。在您的示例中，对于所有三个选项卡集，它将在指令级别创建三个 hideTab 布尔值。因此，如果你想与所有指令共享这个布尔值，你需要把它包装在某个对象中。

angular.module('tabset').controller('tabsetController', function ($scope) {
 $scope.wrapper = {};
 $scope.wrapper.hideTab = false;  
});