Javascript 角基础选项卡显示错误内容和活动标签与NG IF
我正在使用Angular Foundation向页面添加一些选项卡。有些选项卡有条件ng if,有些则没有。不带ng if的选项卡似乎首先渲染并成为默认显示,即使我希望其他选项卡先渲染 此外,当条件更改时,内容并不总是更改为正确的选项卡 我尝试使用javascript来呈现选项卡,但不幸的是,我在视图中使用Jade,内容是模板的包含,javascript无法正确呈现 第一个选项卡集的示例。当ng if计算表达式时,内容将默认为第三个选项卡Javascript 角基础选项卡显示错误内容和活动标签与NG IF,javascript,angularjs,tabs,zurb-foundation,angular-foundation,Javascript,Angularjs,Tabs,Zurb Foundation,Angular Foundation,我正在使用Angular Foundation向页面添加一些选项卡。有些选项卡有条件ng if,有些则没有。不带ng if的选项卡似乎首先渲染并成为默认显示,即使我希望其他选项卡先渲染 此外,当条件更改时,内容并不总是更改为正确的选项卡 我尝试使用javascript来呈现选项卡,但不幸的是,我在视图中使用Jade,内容是模板的包含,javascript无法正确呈现 第一个选项卡集的示例。当ng if计算表达式时,内容将默认为第三个选项卡 <tabset type="navType">
<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:分叉您的
您需要将hideTab布尔值包装到对象。tabset指令创建一个新范围。在您的示例中,对于所有三个选项卡集,它将在指令级别创建三个hideTab布尔值。因此,如果您想与所有指令共享此布尔值,则需要将其包装到某个对象中
angular.module('tabset').controller('tabsetController', function ($scope) {
$scope.wrapper = {};
$scope.wrapper.hideTab = false;
});
您需要在单击时设置相应选项卡的活动属性。参见@JaKXz,根据第三个示例,活动属性似乎不是必需的。此外,它不应该对默认为活动的选项卡产生任何影响。第三个选项卡仍然是第一个显示的选项卡。这具有相同的行为,即第三个选项卡中的内容在第一个或第二个选项卡之前加载。这可能是angular foundation库的问题,因此我可能只需要打开一个github问题。