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=""。

标签在AngularJS的单页应用程序中不起作用

1 个答案: