javascript - 指令是有问题的 Bootstrap 导航-angularjs

Question

这是我的代码 - 它可以工作，但是如果有人在目标区域(文本标签)之外单击，则该指令不会触发。

指令:

//bootstrap change active menu class
app.directive('activeClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).on('click', function() {
                $(".nav div").removeClass("activeTab");
                element.addClass("activeTab");
            });
        }
    };
});

Bootstrap 导航栏:

        <ul class="nav navbar-nav" ng-show="isMentor">
            <li >
                <a href="/home" data-toggle="collapse" data-target=".navbar-collapse"><div active-class>Home</div></a>
            </li>
            <li>
                <a href="/myGoals" data-toggle="collapse" data-target=".navbar-collapse"><div active-class>My goals</div></a>
            </li>
        </ul>

我希望该指令仅影响 div，但在单击标签时触发。我怎样才能做到这一点。谢谢。

Answer 1

将指令附加到 li ，然后像这样更改为 javascript:

app.directive('activeClass', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        $(element).on('click', function() {
            $(".nav div").removeClass("activeTab");
            element.find('div').addClass("activeTab");
        });
    }
};
});