AngularJS merge指示文

Question

コードを繰り返すと嫌いです。だから私はこれを行うより良い方法があるかどうかを知りたい。 私は2つの指令を持っていますが、それらは非常に単純で非常に似ています。 2つのディレクティブは、次のようになります。

.directive('pkFilterProducts', function() { 
    return { 
     restrict: 'A', 
     templateUrl: 'assets/templates/directives/pkFilterProducts.html', 
     scope: { 
      products: '=pkFilterProducts', 
      filters: '=' 
     } 
    } 
}) 

.directive('pkStateProducts', function() { 
    return { 
     restrict: 'A', 
     templateUrl: 'assets/templates/directives/pkStateProducts.html', 
     scope: { 
      products: '=pkStateProducts', 
      states: '=' 
     } 
    } 
}) 

唯一の違いは、1つのフィルタを受け入れ、他の状態を受け入れています。 テンプレートはあまりにも非常に似ています

<div class="col-md-6"> 
    <h3>Excluded ({{ excluded.length }})</h3> 

    <div class="table-responsive" ng-show="excluded.length"> 
     <table class="table table-hover"> 
      <thead> 
       <tr> 
        <th class="image-column"></th> 
        <th>Title</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="product in products | exclude: filters as excluded"> 
        <td><img class="img-responsive" ng-src="{{ product.image }}" /></td> 
        <td>{{ product.shortTitle }}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

<div class="col-md-6"> 
    <h3>Included ({{ included.length }})</h3> 

    <div class="table-responsive" ng-show="included.length"> 
     <table class="table table-hover"> 
      <thead> 
       <tr> 
        <th class="image-column"></th> 
        <th>Title</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="product in products | include: filters as included"> 
        <td><img class="img-responsive" ng-src="{{ product.image }}" /></td> 
        <td>{{ product.shortTitle }}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

と

<div class="col-md-6"> 
    <h3>Excluded ({{ excluded.length }})</h3> 

    <div class="table-responsive" ng-show="excluded.length"> 
     <table class="table table-hover"> 
      <thead> 
       <tr> 
        <th class="image-column"></th> 
        <th>Title</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="product in products | statesExclude: states as excluded"> 
        <td><img class="img-responsive" ng-src="{{ product.image }}" /></td> 
        <td>{{ product.shortTitle }}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

<div class="col-md-6"> 
    <h3>Included ({{ included.length }})</h3> 

    <div class="table-responsive" ng-show="included.length"> 
     <table class="table table-hover"> 
      <thead> 
       <tr> 
        <th class="image-column"></th> 
        <th>Title</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="product in products | statesInclude: states as included"> 
        <td><img class="img-responsive" ng-src="{{ product.image }}" /></td> 
        <td>{{ product.shortTitle }}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

再び、唯一異なるが NGリピートフィルタです。 を使用する代わりに、または は除外を使用します。 州を使用します。および 州を含む。除外を含む。 これを組み合わせる方法はありますか？フィルタに変数を使用していますか？

Answer 1

ちょっとハッキリに聞こえるかもしれませんが、1つのテンプレートで2つのng-repeatsに参加し、ng-ifsを使用して、どちらを有効にするか/実行する必要があるかどうかを確認します。例：

<tr ng-if="states" 
    ng-repeat="product in products | statesInclude: states as included"> 
    <td><img class="img-responsive" ng-src="{{ product.image }}" /></td> 
    <td>{{ product.shortTitle }}</td> 
</tr> 
<tr ng-if="filters" 
    ng-repeat="product in products | include: filters as included"> 
    <td><img class="img-responsive" ng-src="{{ product.image }}" /></td> 
    <td>{{ product.shortTitle }}</td> 
</tr> 

あなたは、おそらく、単一のディレクティブの宣言を使用することができます。

.directive('pkProducts', function() { 
    return { 
     restrict: 'A', 
     templateUrl: 'assets/templates/directives/pkProducts.html', 
     scope: { 
      products: '=pkFilterProducts', 
      filters: '=', 
      states: '=' 
     } 
    } 
}) 

Answer 2

私はwdandaに同意します。

もう1つの解決策は、ブール値をフィルタに渡すことです。ブーリアンに応じて、異なる振る舞いにする必要があります。

参照のためにthisを参照してください。