Question

我有一个导航菜单，我想在点击后添加active课程。除了元素没有在active类中接收属性这一事实之外它很有用，它只是作为一个类添加到HTML中。我也尝试在我的指令中使用$compile来确保添加active类，但它仍然无法正常工作。我在这里缺少什么？

HTML：

<ul id="app-navigation" class="clearfix list">
    <li data-my-active-class>
        <img src="images/add.png" no-repeat class="nav-image">
    </li>
    <li data-my-active-class>
        <img src="images/edit.png" no-repeat class="nav-image">
    </li>
    <li data-my-active-class>
        <img src="images/delete.png" no-repeat class="nav-image">
    </li>
</ul>

指令：

shoppingApp.directive('myActiveClass', ['$compile', function($compile) {

    return {
        restrict: 'A',
        link: function($scope, element, attrs) {

            element.on('click', function() {

                element.parent().children('.active').removeClass('.active');
                element.addClass('.active');
            });

            $compile(element)($scope);
        }
    }
}]);

CSS：

.active {
    background: red;
}

Answer 1

在addClass和removeClass中active代替.active

活动类被添加到HTML而不是其属性

1 个答案: