1

我目前正在为我的 CSS/Grid 框架使用 Zurb Foundation 4，他们有一个非常好的选项卡控件。但是，当它位于通过 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);

            }


        }


    }

});

我真的很感激任何帮助。

谢谢，

克里斯

4

1 回答 1

8

angularui/bootstrap 项目有一个非常简单的实现，带有选项卡和窗格（您的部分等效）。在Github上查看

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

于 2013-04-22T21:28:50.267 回答