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

上查看

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

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

1 个答案: