如何在AngularJS中创建自定义TabControl指令

Question

我目前正在使用Zurb Foundation 4作为我的CSS/Grid Framework,他们有一个非常好的Tab Control.但是,当它位于通过ng-view加载的页面上时,选项卡控件无法正常工作.

所以,我以为我会编写自己的指令,因为我将在我们的网站上使用它.然而,一旦我进入它,我很快就意识到我在我脑海中.

我提供了一个我想要做的例子,然后是我实际代码混乱的一个例子

静态示例:这是我想要完成的.请参阅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);

            }


        }


    }

});

我非常感谢任何帮助.

谢谢,

克里斯

Answer 1

angularui/bootstrap项目有一个非常简单的实现,带有制表符和窗格(相当于您的部分).在Github上查看

基本思想是创建两个指令(一个用于选项卡,一个用于部分),并且在它们之间有一个通用控制器进行通信.