javascript - 在 Angular Directive(指令)中使用 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>