具有循环依赖的AngularJS多参数过滤

Question

我正在尝试创建商店索引，按类别显示它们，所以我有两个 ng-repeat，一个用于类别，另一个用于商店

我有一个类别的数组 (['cat1', 'cat2', ..])

另一个与商店 ([{name: 'shop1', categories: ['cat2', 'cat3']}, ..])

这是中继器的 HTML 代码：

<div ng-repeat="categoria in categorias | filter:categorySearch:strict">
    <h3>{{categoria}}</h3>
    <hr width="70%" align="left">
    <table style="text-align: center;" class="col-xs-12 col-sm-12 col-md-12 table table-bordered table-striped" class="tabla_tiendas">
    <tr ng-repeat="tienda in tiendas | filter:{agregada: 'false'} | filterByCategory:categoria:tienda" >
        <td class="col-xs-4 col-sm-4 col-md-4 tienda-{{tienda.seleccionada}}"><input type="checkbox" ng-change="setPosition(tienda, tienda.seleccionada)" ng-model="tienda.seleccionada" value="{{tienda.id}}"></td>
        <td class="col-xs-4 col-sm-4 col-md-4 tienda-{{tienda.seleccionada}}">{{tienda.nombre}}</td>
        <td class="col-xs-4 col-sm-4 col-md-4 tienda-{{tienda.seleccionada}}">{{tienda.categorias}}</td>
    </tr>
    </table>
</div> 

这是 Angular 代码：

app.filter('filterByCategory', function(tienda, categoria){
    return function(tienda, categoria){return _.contains(tienda.categorias, categoria);};
});

最后是错误：

Error: Circular dependency: 
    at Error (<anonymous>)
    at Object.c [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:26:368)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:108:41
    at l (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:70:141)
    at Oc.fa (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:74:463)
    at k (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:69:505)
    at Oc (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:75:29)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:78:241
    at Object.e.$watchCollection (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:88:58)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:156:40 <!-- ngRepeat: tienda in tiendas | filter:{agregada: 'false'} | filterByCategory:categoria:tienda --> angular.min.js:63
(anonymous function) angular.min.js:63
(anonymous function) angular.min.js:53
l angular.min.js:44
e angular.min.js:39
e angular.min.js:39
e angular.min.js:39
e angular.min.js:39
(anonymous function) angular.min.js:38
(anonymous function) angular.min.js:157
(anonymous function) angular.min.js:89
e.$digest angular.min.js:89
e.$apply angular.min.js:91
(anonymous function) angular.min.js:152
(anonymous function) angular.min.js:23
o angular.min.js:6
c

是什么导致了循环依赖，我该如何打破它？我也对另一种解决方案持开放态度，但它可以改变数据架构

编辑：

这里我有一个 jsFiddle 的问题：http://jsfiddle.net/truca/HB7LU/1458/ （如果我使用过滤器“filterByCategory”我得到循环依赖，如果我使用过滤器“filterByCategoryScope”我没有得到参数类别，所以我不能过滤）

Answer 1

您的过滤器工厂无效。

角度过滤器在以下签名中定义：

app.filter('filterName', function(/*optional injectables*/){
  return function(item, param1, param2, ...){
    //some filter-specific calculations...
    return true/false
  }
});

and 用在视图表达式中，语法如下：

ng-repeat="item in items | filterName:param1:param2"

您的过滤器定义不正确：

app.filter('filterByCategory', function(tienda, categoria){
    return function(tienda, categoria){
      return _.contains(tienda.categorias, categoria);
    };
});

由于过滤器工厂和实际过滤器函数之间的混淆，您已指示 Angular 查找并注入 tienda 和 categoria 依赖项，但这些并不存在。

所以，正确的过滤器签名是：

myApp.filter('filterByCategory', function(){
    return function(shop, categoria){
        return _.contains(shop.categorias, categoria);
    };
});

及用法：

ng-repeat="shop in shops | filterByCategory:categoria"

Answer 2

已经解决了，非常感谢大家

这是 jsFiddle 的最终结果：

http://jsfiddle.net/truca/HB7LU/1460/

HTML： {{类别}} {{shop.name}}

过滤器：

myApp.filter('filterByCategory', function () {
    return function (shops, category) {
        return _.filter(shops, function(shop){
            return _.contains(shop.categories, category)
        });
    };
});