NG-クラスはNG・リピートを持つ要素には適用されません

Question

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

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> 

次のテンプレートを：

最初のテーブル行はテスト目的で追加されたばかりです。変数 'optional'の値に応じて、クラスには「オプション」が正しく設定されています。 しかし、ng-repeatによって作成されたテーブル行には、「オプションの」クラスが設定されていることはありません。私は私のディレクティブで-1001の優先順位を使用することを提案している次の記事 Angular js Custom Directive on element with ng-repeat - Can't set CSS classes を発見したが、その記事では元のコードの1001年にも答えで提案-1001どちらも私の場合で違いを確認

。

なぜng-repeatがng-repeatの要素に適用されないのですか？

Answer 1

[OK]を、問題は、テンプレート内の次の行だったようで友人に話した後：

<tr ng-class="{'optional': optional}" ng-repeat="interface in interfaces = (getInterfaces())" > 

括弧内のコールが停止無限の反復にリードを持っているようだ）（でgetInterfacesを入れましたng-classが適用されなくなりました。私はそれらのエラーメッセージを見ていたが、それらと私の問題との間の接続を作っていなかった。

次のように私は問題を解決した

：

代わりInterfacesServiceからデータを取得し、私は今、パラメータとして外テンプレートからそれらを渡しています：

<tbody interfaces minor="true" interfaces="{{information.host.interfaces}}"></tbody> 
<tbody interfaces minor="false" interfaces="{{information.host.interfaces}}"></tbody> 

そしてディレクティブIで「新しいバインディングを追加しまし：

scope : { 
     minor : '@', 
     interfaces: '<' 
    }, 

そして、私のインタフェース・テンプレートは現在、直接この新しいバインディングを参照：

<tr ng-class="{'optional': optional}" ng-repeat="interface in interfaces" > 

InterfacesServiceからこの情報をディレクティブに渡すのではなく、その情報を取得しようとしたのは、これを試して失敗し、回避策が使用されたためです。

私は私がサービスを取り除くので、

を取得することができ代わりに「@」の結合「<」を使用するために（わずかに異なる設定（ AngularJs: How to pass part of my data from one component to anotherを参照）、そこの答えで再び同じ問題に出くわし私のNG-繰り返し文の

(getInterfaces()) 

一部。