标签在单页应用程序中不使用AngularJS来工作

Question

我有一个"编辑"视图，我需要在其中显示选项卡以分开所需的不同信息。我找到了一个网站，其中讨论了创建指令以捕捉标签更改的指令。这是我的第一个指令，它不起作用。当我单击第二个选项卡时，它将带我回到默认视图。不知道我已经错误地实现了什么。

网页 -

<ul class="nav nav-tabs">
    <li class="active"><a showTab="" href="#home">Home</a></li>
    <li><a showTab="" href="#menu1">Menu 1</a></li>
    <li><a showTab="" href="#menu2">Menu 2</a></li>
    <li><a showTab="" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
</div>

相关指令 -

'use strict';
define(['app'], function (app) {
    var injectParams = ['showtab'];
    var wcTabDirective = function (showtab) {
        return {
            link: function (scope, element, attrs) {
                element.click(function (e) {
                    e.preventDefault();
                    $(element).tabs('show');
                });
            }
        }
    };
    wcTabDirective.$inject = injectParams;
    app.directive('wcTab', wcTabDirective);
});

我在指令中提出了一个断点，但从未达到。

Answer 1

您实际上还没有将" WC-TAB"指令应用于任何元素。

尝试将指令添加到标签锚元素：

<a wc-tab showTab="" href="#menu1">Menu 1</a>

检查showTab属性也正确。如果是指令，则应将其应用于show-tab=""。