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

时间:2014-12-30 20:53:59

标签: javascript angularjs tabs zurb-foundation angular-foundation

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

此外,当条件发生变化时,内容并不会始终更改为正确的标签。

我尝试使用javascript来渲染标签,但不幸的是我使用Jade作为我的观点,内容是模板的包含,javascript无法正常呈现。

第一个tabset的示例。当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

1 个答案:

答案 0 :(得分:1)

分叉你的plnkr

你需要将hideTab布尔包装到一个对象。 tabset指令创建一个新范围。在您的示例中,对于所有三个tabset,它将在指令级别创建三个hideTab boolean。因此,如果要与所有指令共享此布尔值,则需要将其包装在某个对象中。

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

});