javascript - 如何将过滤后的参数发送到指令

Question

我有一个像这样的照片轮播指令

<mz-photo-carousel items-per-slide=6
                   carousel-data="vm.carouselData">
</mz-photo-carousel>

在指令内部，它只是 html，用于显示带有传递数据的轮播

<div uib-carousel active="active" no-wrap="noWrapSlides">
    <div uib-slide ng-repeat="slide in vm.carouselData">
     ....
    </div>
</div>

我想将过滤后的数据发送到 mz-photo-carousel 指令，如下所示:

<mz-photo-carousel items-per-slide=6
                   carousel-data="vm.carouselData | myFilter:param">
</mz-photo-carousel>

我不想在 mz-photo-carousel 指令内进行过滤，因为我想让它保持通用以仅处理它获取的数据。

Answer 1

问题在于，由于您将两种方式的数据绑定(bind)设置为 array 属性。

引用SO答案:

SO Answer

When you pass filter job to your directive, angular will place a watch on your jobs variable. So when jobs gets assigned in directive watch get called, which will trigger filter again, and this will goes on until maximum digest cycle reached by angular.

To avoid this situation, you can create a filter method and pass that method in ng-model. This way you can avoid both copy creation and maximum digest cycle error.

所以为了消除错误。使用以下 JS 在指令内使用过滤器。还提供演示。

JSFiddle Demo

JS:

var demo = angular.module('demo', []);
demo.directive('arrayDisplay', function($parse, $filter){
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
        scope: {array: '=', from: '=', to:'='},
        template: '<span>{{array}}<span>after the filter is applied : {{filtered}}</span></span>',
        link: function(scope, element, attrs){
            scope.filtered = $filter('slice')(scope.array, scope.from, scope.to);
        }
    }
 });

demo.filter('slice', function() {
    return function(input, from, to) {
        return input.slice(from, to);  
  };
})

function MyCtrl ($scope) {
    $scope.array = [1,2,3,4,5,6,7,8,9,10];   

};