如何在AngularJS中創建自定義TabControl指令

我目前正在爲我的CSS/Grid Framework使用Zurb Foundation 4，他們有一個非常好的Tab控件。但是，當它位於通過ng-view加載的頁面上時，選項卡控件無法正常工作。如何在AngularJS中創建自定義TabControl指令

所以，我想我會寫我自己的指令，因爲我將在我們的網站上使用它。但是，一旦我進入它，我很快意識到自己已經過了頭。

我提供什麼，我試圖做一個例子，然後我實際的代碼

靜態例如亂七八糟的例子：這裏就是我試圖完成。請參閱JsFiddle上的完整代碼示例。 http://jsfiddle.net/aYTaN/1/

<div class="tab-container"> 

    <p class="active-tab"> 
     <a href="">Tasks</a> 
    </p> 
    <p> 
     <a href="">Parts</a> 
    </p> 

    <section> 
     Tab 1 content 
    </section> 

    <section style="display:none"> 
     Tab 2 Content 
    </section> 

</div>

下面是實際的代碼，我有一個不工作： http://jsfiddle.net/dxwc9/3/

app.directive('tabControl', function($rootScope) { 
    'use strict'; 

    return { 

     restrict: 'E', 

     link: function(scope, element, attrs) { 

      console.log(attrs.tabs); 

      var tabs = attrs.tabs.split(','); 

      var tabContainer = angular.element('<div class="tab-container"></div>'), 
       tab = angular.element('<p><a href=""></a></p>'), 
       content = angular.element('<section></section>'); 

      for (var i = 0; i<tabs.length; i++){ 

       tabContainer.append(tab); 

       var title = tab.find('a'); 

       title.html(tabs[i]); 

       tabContainer.append(content); 

      } 


     } 


    } 

});

我會很感激的任何幫助，請。

謝謝

克里斯

來源

2013-04-22 cpeele00

的angularui /引導項目有一個非常簡單的實現與卡和窗格（相當於你的部分）。檢查出Github

基本的想法是創建兩個指令（一個用於標籤，一個用於部分），並有一個共同的控制器之間溝通。

來源

2013-04-22 21:28:50

選項卡已更新爲製表符，這在代碼方面稍微複雜一些，但同樣的概念仍然適用於具有通用控制器。 – 2013-05-24 19:07:56

如何在AngularJS中創建自定義TabControl指令

回答

相關問題