css - 根据他的内容更改父 li 元素类

Question

我有这个简单的无序列表

<ul>
    <li>
        <p>Entertainment</p>
        <ul>
            <li><p>Lady GAGA</p></li>
            <li><p>Lady GAGA</p></li>
            <li><p>Lady GAGA</p></li>
            <li><p>Lady GAGA</p></li>
        </ul>
    </li>

    <li>
        <p>Fasion</p>
    </li>

    <li>
        <p>Animals</p>
    </li>
</ul>

我想要 <li>有 <ul>它的内部会自动获得一个特殊的类/样式，因此如果内容(ul)将被移动或删除，特殊类也会从父级 <li> 中删除。 .

如果它可以在 css 或 sass 中完成但在 ng-class 中，我会很高兴也可以。

谢谢。

Answer 1

您可以使用 directive 来做到这一点.

angular.module('myModule').directive('li', function() {
    return {
        restrict: 'E',
        link: function(scope, element) {
            scope.$watch(function() {
                return $(element).find("ul").length;
            }, function(newValue) {
                if(newValue === 0) {
                    element.removeClass("hasSubList");
                }
                else {
                    element.addClass("hasSubList");
                }
            });
        }
    };
});