如何创建自定义的TabControl指令在AngularJS [英] How to create custom TabControl Directive in AngularJS

问题描述

我目前使用Zurb基金会4我的CSS /网格框架和他们有一个非常好的选项卡控件。然而，当它是通过加载一个页面上NG-查看标签控件不工作的权利。

I'm currently using Zurb Foundation 4 for my CSS/Grid Framework and they have a really nice Tab Control. However, when it is on a page that is loaded via ng-view the tab control doesn't work right.

所以，我还以为因为我将使用这个在我们的网站我会写我自己的指令。但是，一旦我进入它，我很快就意识到我是在我的头上。

So, I'd thought I'd write my own directive since I will be using this across our site. However, once I got into it I soon realized I was in over my head.

我提供什么，我试图做一个例子，然后我的实际code的乱七八糟的例子

I've provided an example of what I am trying to do and then an example of my actual mess of code

静态例子：这里就是我试图完成。查看的jsfiddle满code例子。
http://jsfiddle.net/aYTaN/1/

Static example: Here is what I am trying to accomplish. See full code example on 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>

下面是实际code我有一个不工作：
http://jsfiddle.net/dxwc9/3/

Here's the actual code I have that is not working: 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);

            }


        }


    }

});

我真的AP preciate任何帮助，请。

I would really appreciate any help please.

感谢您，

克里斯

推荐答案

在angularui /引导项目有一个非常简单的实现与卡和窗格（您的部分当量）。检查出来的 Github上

The angularui/bootstrap project has a very simple implementation with tabs and panes (your sections equivalent). Check it out on Github

的基本思想是建立两个指令（一个用于标签，以及一个用于部分）和具有它们之间的公共控制器通信。

The basic idea is creating two directives (one for the tabs, and one for the sections) and having a common controller communicate between them.

这篇关于如何创建自定义的TabControl指令在AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！