Angular Foundation选项卡显示错误的内容和带有ng-if的活动选项卡

Question

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

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

我尝试使用javascript来呈现选项卡，但不幸的是，我的视图使用的是Jade，内容是模板的include，而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>

也许我没有正确使用制表符？

我在这里创建了一个柱塞：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;  

});