AngularJS合併指令

我討厭它，當我重複代碼。所以我想知道是否有更好的方法來做到這一點。我有2個指令，它們非常簡單，非常相似。的2個指令是這樣的：AngularJS合併指令

.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重複過濾器。代替使用包括或排除它使用statesInclude和statesExclude。有沒有辦法可以結合這些呢？也許使用過濾器的變量？

來源

2016-06-14 r3plica

您不能爲過濾器使用變量。除非你想重構過濾器並創建接受'mode'參數並且聚合include和stateInclude的自定義過濾器，否則沒有辦法。而且，tbh的代碼並不爲重構而哭泣，我沒有理由用混亂的共同點來毀掉它。 – estus

http://stackoverflow.com/questions/26710513/angular-filter-name-as-variable顯示使用filternames作爲變量 – r3plica

它與自定義過濾器基本相同，只是更加尷尬。 – estus

這可能聽起來有點過於冒險，但我會在單個模板中加入兩個ng-repeat並使用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: '=' 
     } 
    } 
})

來源

2016-06-14 12:55:33 wdanda

雖然沒有真正解決任何問題，但我重複所有的ng重複的html :( – r3plica

我wdanda同意。

另一種解決方案是將布爾值傳遞給您的過濾器。根據布爾值，你需要使其表現不同。

請參閱this以供參考。

來源

2016-06-14 13:00:49

AngularJS合併指令

回答

相關問題