Tabs無法在AngularJS的單頁應用程序中工作

我有一個「編輯」視圖，我需要顯示選項卡來分隔所需的不同信息。我發現了一個網站，它討論了創建一個指令來捕捉選項卡變化。這是我的第一個指令，它不起作用。當我點擊第二個選項卡時，它會將我帶回默認視圖。不知道我的執行有誤。Tabs無法在AngularJS的單頁應用程序中工作

網頁 -

<ul class="nav nav-tabs"> 
    <li class="active"><a showTab="" href="#home">Home</a></li> 
    <li><a showTab="" href="#menu1">Menu 1</a></li> 
    <li><a showTab="" href="#menu2">Menu 2</a></li> 
    <li><a showTab="" href="#menu3">Menu 3</a></li> 
</ul> 

<div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     <h3>HOME</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     <h3>Menu 1</h3> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     <h3>Menu 2</h3> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
    </div> 
    <div id="menu3" class="tab-pane fade"> 
     <h3>Menu 3</h3> 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
    </div> 
</div>

相關的指令 -

'use strict'; 

define(['app'], function (app) { 

    var injectParams = ['showtab']; 

    var wcTabDirective = function (showtab) { 
     return { 
      link: function (scope, element, attrs) { 
       element.click(function (e) { 
        e.preventDefault(); 
        $(element).tabs('show'); 
       }); 
      } 
     } 
    }; 

    wcTabDirective.$inject = injectParams; 

    app.directive('wcTab', wcTabDirective); 

});

我已經把一個破發點中的指令，但它從來沒有達到過。

來源

2015-05-13 Craig

你似乎不喜歡使用'wc-tab'設置選項卡。也有更好的方式來使用[引導與角]（https://angular-ui.github.io/bootstrap/#/tabs） – PSL

@PSL ...這看起來也是一個很好的實現這個方法。只需要弄清楚如何根據選定的選項卡顯示不同的html文件。 – Craig

您實際上並沒有將「wc-tab」指令應用於任何元素。

嘗試添加指令你的標籤錨元素：

<a wc-tab showTab="" href="#menu1">Menu 1</a>

檢查showTab屬性是正確的爲好。如果是指令，則應該將其作爲show-tab=""應用。

來源

2015-05-13 21:14:07

Tabs無法在AngularJS的單頁應用程序中工作

回答

相關問題