次のカスタム ディレクティブがあります。
angular.module('Interfaces').directive('Interfaces', function() {
return {
restrict : 'A',
scope : {
minor : '@'
},
templateUrl : 'interfaces/interfaces.template.html',
controller : [ '$scope', 'InterfacesService', function InterfaceController($scope, InterfacesService) {
$scope.interfacesService = InterfacesService;
$scope.label = 'Interfaces';
$scope.optional = ($scope.minor == "true");
if ($scope.optional) {
$scope.label = '';
}
$scope.getInterfaces = function getInterfaces() {
return $scope.interfacesService.getInterfaces($scope.minor);
};
} ]
};
});
そして、次のテンプレート
<tr ng-class="{'optional': optional}"><td colspan="5">Just testing</td></tr>
<tr ng-class="{'optional': optional}" ng-repeat="interface in interfaces = (getInterfaces())" >
<td rowspan='{{interfaces.length}}' class='label-column' ng-if="$index === 0">{{label}}</td>
<td colspan='2' class='data'>{{interface.key}}</td>
<td colspan='2' class='data'>{{interface.value}}</td>
</tr>
このディレクティブをテーブルの一部として使用しています:
<table>
<tbody>
<!-- other table content -->
</tbody>
<tbody interfaces minor="true"></tbody>
<tbody interfaces minor="false"></tbody>
<tbody>
<!-- other table content -->
</tbody>
</table>
最初のテーブル行は、テスト目的で追加されています。変数「optional」の値に応じて、クラス「optional」が正しくあります。ただし、ng-repeat によって作成されたテーブル行には、「オプション」変数の値に関係なく、「オプション」クラスが設定されることはありません。
次の記事 Angular js Custom Directive on element with ng-repeat - Can't set CSS classes を見つけました。これは、ディレクティブで優先度 -1001 を使用することを示唆していますが、その投稿の元のコードの 1001 も -1001 もありません。答えで提案されたことが私の場合に違いをもたらします。
ng-repeat を持つ要素に ng-class が適用されないのはなぜですか?