AngularJS 合并指令

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 过滤器。它不使用 include 或 exclude，而是使用 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。