jquery - 事件类被添加到 HTML 而不是它的属性

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