活动 class 被添加到 HTML 但不是其属性

Question

我有一个导航菜单，我想在它被点击后添加一个 active class。除了元素不接收 active class 中的属性这一事实外，它的效果很好，它只是作为 class 添加到 HTML 中。我也尝试在我的指令中使用 $compile 以确保添加 active class 但它仍然不起作用。我在这里错过了什么？

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

活动 class 被添加到 HTML 但不是其属性

Active class being added to the HTML but not its properties

css

jquery

angularjs

angular-directive