AngularJS纳克级的和无效的标签 - 功能被打破

Question

我们有标签工作正常使用该HTML

<div class="col-lg-3 col-md-3 panel-container"> 
 
    <ul class="nav nav-pills nav-stacked"> 
 
     <li class="active"><a data-toggle="pill" href="#general" ng-class="{true: 'invalid-tab', false: ''}[form.editTemplateGeneralForm.$invalid]">@Labels.general</a></li> 
 
     <li><a data-toggle="pill" href="#startingValues" ng-class="{true: 'invalid-tab', false: ''}[form.editTemplateStartingValuesForm.$invalid]">@Labels.startingValues</a></li> 
 
    </ul> 
 
</div>

用于正常工作无效的标签，当标签是无效的它显示为红色。现在它不再有用了，我们怀疑它是最新版本的AngularJS打破了这种功能。我们使用v1.3.13。

你知道应该在上面的语法中调整什么，以使它再次工作（这是在我们的应用程序的许多页面中使用）。

这是从我们的site.css无效标签：

.widget .invalid-tab * { 
 
    background-color: #F9EAF3; 
 
    /*color: #F9EAF3;*/ 
 
    color: #d43f3a; 
 
} 
 

 
    .widget .invalid-tab:hover * { 
 
     background-color: #E06B6C; 
 
     color: #ffffff; 
 
    }

Answer 1

正确的方法来定义纳克级如下：ng-class="{classname: expresstion}"

您还需要从css选择器中删除星号 - 因为您正在选择任何子元素。但.invalid-tab没有子元素。

另一种解决方案是从移动.invalid-tab类父li-element

angular.module('myApp', []) 
 
    .directive('testApp', function(){ 
 
    return { 
 
     link: function(scope) { 
 
     scope.form = { 
 
      editTemplateStartingValuesForm: {$invalid: true}, 
 
      editTemplateGeneralForm: {$invalid: false} 
 
     }; 
 
     } 
 
    }; 
 
    });

.widget .invalid-tab { 
 
    background-color: #F9EAF3; 
 
    /*color: #F9EAF3;*/ 
 
    color: #d43f3a; 
 
} 
 

 
.widget .invalid-tab:hover { 
 
    background-color: #E06B6C; 
 
    color: #ffffff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> 
 
<div ng-app="myApp" class="widget" test-app> 
 
    <div class="col-lg-3 col-md-3 panel-container"> 
 
    <ul class="nav nav-pills nav-stacked"> 
 
     <li class="active"> 
 
     <a data-toggle="pill" href="#general" ng-class="{'invalid-tab': form.editTemplateGeneralForm.$invalid}">@Labels.general</a> 
 
     </li> 
 
     <li> 
 
     <a data-toggle="pill" href="#startingValues" ng-class="{'invalid-tab': form.editTemplateStartingValuesForm.$invalid}">@Labels.startingValues</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>