在angular指令中使用ng-repeat过滤器

Question

我有重复我的产品的指令，它的工作正常。但我想添加一些过滤器添加到它。

这是我的指令代码：

app.directive('product', ['$compile', function($compile) {
    return {
        restrict: 'E',
        scope: {
            products: '='
        },
        link: function(scope, element, attrs) {
            var template =
                '<ul>' +
                    '<li data-ng-repeat="product in products>' +
                        '{{product.productName}}' +
                    '</li>' +
                '</ul>';

            // Render the template.
            element.html('').append($compile(template)(scope));
        }
    }
}]);

当我向我的html添加指令时，显示有线错误！

<product products="products | filter:{mainCategoryID : category.categoryID}:true"></product>

控制台中出现

错误：

我如何解决这个问题？

Answer 1

试试这个

var app = angular
  .module('MyApp', [
  ])
.controller('Main', ['$scope', function ($scope) { 
    var self = this;
  
     self.products = [{"productName":"a","id":12},{"productName":"b","id":"34"}];
}])
.directive('product', ['$compile', function($compile) {
    return {
        restrict: 'E',
        scope: {
            products: '=',
            ngModel : '=',
        },
        link: function(scope, element, attrs) {
            var template =
                '<ul>' +
                    '<li data-ng-repeat="product in products |filter:{id:ngModel}">' +
                        '{{product.productName}}' +
                    '</li>' +
                '</ul>';

            // Render the template.
            element.html('').append($compile(template)(scope));
        }
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
      <div>
         <input type="text" ng-model="myCtrl.pID" />
           <product  products="myCtrl.products " ng-model="myCtrl.pID"></product>
     </div>
</div>

Answer 2

而不是创建指令。在ng-repeat

中使用过滤器

<div data-ng-repeat="product in products | filter: checkId"></product>
   <ul>
       </li>
           {{product.productName}}
       </li>
   </ul>
<div>

在您的控制器中

$scope.checkId = #you can do whatever you wanted to.