0

次のカスタム ディレクティブがあります。

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 が適用されないのはなぜですか?

4

1 に答える 1