我正在使用 Angular-Foundation 向页面添加一些选项卡。有些选项卡有条件 ng-if,有些则没有。没有 ng-if 的选项卡似乎首先渲染并成为默认显示,即使我希望其他选项卡首先渲染。
此外,当条件发生变化时,内容并不总是会更改为正确的选项卡。
我尝试使用 javascript 来呈现选项卡,但不幸的是,我使用 Jade 作为 View ,并且内容是模板的包含内容,而 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>
另一个选项卡。第三个选项卡上的 hack 将使第一个或第二个选项卡和内容首先显示,但在切换 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
最佳答案
fork 你的plnkr
您需要将 hideTab bool 值包装为一个对象。 tabset 指令创建一个新范围。在您的示例中,对于所有三个选项卡集,它将在指令级别创建三个 hideTab bool 值。因此,如果您想与所有指令共享此 bool 值,则需要将其包装在某个对象中。
angular.module('tabset').controller('tabsetController', function ($scope) {
$scope.wrapper = {};
$scope.wrapper.hideTab = false;
});
关于javascript - Angular Foundation 选项卡显示错误的内容和带有 ng-if 的事件选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27712404/