Angular Foundation選項卡顯示錯誤的內容和活動選項卡與ng-if

我正在使用Angular-Foundation將一些選項卡添加到頁面。一些標籤有一個條件ng-if，有些則沒有。沒有ng-if的選項卡似乎先呈現併成爲默認顯示，儘管我希望其他選項卡先呈現。Angular Foundation選項卡顯示錯誤的內容和活動選項卡與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

來源

2014-12-30 twinb

您需要在點擊時設置適當的選項卡的活動屬性。請參閱http://pineconellc.github.io/angular-foundation/ – JaKXz

@JaKXz根據第三個示例，活動屬性似乎不是必需的。此外，它不應該對哪個選項卡默認爲激活狀態有任何影響。第三個標籤仍然是第一個顯示。 – twinb

叉形您plnkr

你需要用你hideTab布爾的對象。 tabset指令創建一個新的作用域。在你的例子中，對於所有三個tabset，它將在指令級創建三個hideTab布爾值。所以，如果你想與所有指令共享這個布爾值，你需要將它包裝在一些對象中。

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

});

來源

2014-12-31 07:40:55 dhavalcengg

這與第三個選項卡的內容在第一個或第二個選項卡之前加載的行爲相同。這可能是角度基礎庫的問題，所以我可能只需要打開一個github問題。 – twinb

Angular Foundation選項卡顯示錯誤的內容和活動選項卡與ng-if

回答

相關問題