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>