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-repeat 过滤器。它不使用包含或排除，而是使用 statesInclude 和 statesExclude 。有没有办法可以将这些结合起来？也许使用变量过滤器？

Answer 1

听起来有点过于讨厌，但我会在一个模板上加入两个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。

另一种解决方案是将布尔值传递给过滤器。根据布尔值，您需要使其行为不同。

请参阅this以供参考。

AngularJS合并指令

2 个答案: