如何在AngularJS中创建自定义TabControl指令 我现在使用ZURB基金会4作为我的CSS/Grid框架，他们有一个很好的选项卡控件。但是，当它位于通过ng view加载的页面上时，选项卡控件无法正常工作

所以，我想我应该写我自己的指令，因为我将在我们的网站上使用它。然而，一旦我进入它，我很快意识到我是在我的头

我提供了一个我正在尝试做的例子，然后是一个我实际混乱的代码的例子

静态示例：以下是我试图实现的目标。请参阅JSFIDLE上的完整代码示例。

以下是我的实际代码，但它不起作用：

我真的非常感谢你的帮助

谢谢,

---

Chris

angularui/bootstrap项目有一个非常简单的实现，其中包含与您的分区等效的选项卡和窗格。请在

---

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

angularui/bootstrap项目有一个非常简单的实现，其中包含与分区等效的选项卡和窗格。请在

---

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

选项卡已更新为选项卡集，这在代码方面有点复杂，但相同的概念仍然适用于公共控制器。选项卡已更新为选项卡集，这在代码方面有点复杂，但相同的概念仍然适用于具有公共控制器。

<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>

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);

            }


        }


    }

});