javascript - ng-class 完美地应用第一类，但第二类不阅读 css 规则

Question

我有一个带有链接的简单菜单 <a>里面<li> .我只是为 ng-class 使用了 2 个条件: 当它们处于非事件状态时使用“link-ordenar”类，但当它们处于事件状态时使用“link-ordenar-active”类。

当它执行非事件链接的条件时，它工作得很好，CSS 显示它应该的。虽然当它将 css 更改为“link-ordenar-active”类时，它确实更改了类，但它完全无视我的 css 样式表，其中写了此类的规则....

这是我的 HTML Angular 代码:

<ul>
    <li>
        <a href ng-class="{'link-ordernar':!tabActive('pordescargar'), 'link-ordenar-active':tabActive('pordescargar')}" ng-click="activarTab('pordescargar')">por descargar</a>
    </li>
    <li>
        <a href ng-class="{'link-ordernar':!tabActive('descargado'), 'link-ordenar-active':tabActive('descargado')}" ng-click="activarTab('descargado')">descargado</a>
    </li>
    <li>
        <a href ng-class="{'link-ordernar':!tabActive('regalado'), 'link-ordenar-active':tabActive('regalado')}" ng-click="activarTab('regalado')">regalado</a>
    </li>
</ul>

有什么想法吗？

我试过将名称更改为不使用破折号，只使用一个驼峰式单词，还在同一个 html 文件中添加样式...两者的结果相同。

所以这里使用 link-ordenar-active 选择“por descargar”，只有默认的链接样式

这里选择另一个元素

其他菜单项链接在 ng-class 的第一个条件中使用 link-ordenar 类它根据我的样式表的 css 规则求值...

link-ordenar-active 和 link-ordenar 的 CSS:

.link-ordernar {
   color: #202020;
   text-decoration: none;
   display: inline-block;
   margin: 0px -4px 10px 0px;
   font-size: 25px;
   padding: 0px 10px;
   text-transform: uppercase;
}

.link-ordernar-active {
    text-decoration: none;
    display: inline-block;
    margin: 0px -4px 10px 0px;
    font-size: 25px;
    padding: 0px 10px;
    text-transform: uppercase !important;
    font-family: Fairview_Regular !important;
    color: #202020 !important;
    background: #ccc;
}

如果我明确地写class="link-ordenar-active"进入菜单项之一，它确实显示了应有的 CSS 样式:

更新 #1:

下面是 tabActive 和 activarTab 的实现:

        $scope.activarTab = function(tab){
            $scope.tabActual = tab;
            $scope.cargarMusica();
        };

        $scope.tabActive = function(tab){
            if($scope.tabActual === tab)
                return true;
            else
                return false;
        };

Answer 1

好的，所以我为那些可能遇到此问题的人做了一个解决方法。我还没有弄清楚为什么它不会加载应用的第二个类，但由于我手上的时间很短，因此此修复程序可以解决元素中一些重要的问题。

所以我所做的是为菜单中的每个元素创建 2 个元素，一个使用 link-ordenar 类，另一个使用 link-ordenar-active 类，我只是使用 ng-show 根据需要隐藏它们。继承人的代码:

<ul>
        <li>
            <a href ng-show="!tabActive('pordescargar')" class="link-ordernar" ng-click="activarTab('pordescargar')">por descargar</a>
            <a href ng-show="tabActive('pordescargar')" class="link-ordernar-active" ng-click="activarTab('pordescargar')">por descargar</a>
        </li>
        <li>
            <a href ng-show="!tabActive('descargado')" class="link-ordernar" ng-click="activarTab('descargado')">descargado</a>
            <a href ng-show="tabActive('descargado')" class="link-ordernar-active" ng-click="activarTab('descargado')">descargado</a>
        </li>
        <li>
            <a href ng-show="!tabActive('regalado')" class="link-ordernar"  ng-click="activarTab('regalado')">regalado</a>
            <a href ng-show="tabActive('regalado')" class="link-ordernar-active"  ng-click="activarTab('regalado')">regalado</a>
        </li>
</ul>