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

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

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

参考来自 SO 答案：

SO Answer

当您将过滤作业传递给您的指令时，角度将放置一个手表 在你的工作变量上。因此，当在指令监视中分配工作时 被调用，这将再次触发过滤器，这将继续 直到角度达到最大消化周期。

为避免这种情况，您可以创建一个过滤器方法并将其传递给 ng-model 中的方法。这样您就可以避免复制创建和 最大消化周期误差。

所以为了消除错误。使用下面的 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];   

};