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: '=' 
     } 
    } 
}) 

유일한 차이점은 하나의 필터를 수용 할 수있다, 다른 하나는 상태를 받아들입니다. 템플릿도 매우 유사합니다 :

<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

너무 익숙하지 않을 수도 있지만 단일 템플릿에서 두 개의 ng 반복을 결합하고 ng-ifs를 사용하여 어느 것이 유효한지 확인해야합니다./실행해야합니다. 예 :

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

Answer 2

내가 wdanda에 동의 :

<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> 

당신은 아마도 하나의 지시어 선언을 사용할 수 있습니다.

다른 해결책은 부울을 필터에 전달하는 것입니다. 부울에 따라 다른 동작을 수행해야합니다.

참조 용으로 this을 참조하십시오.