How to send filtered param to a directive

Question

I have a photo carousel directive like that

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

inside the directive its just html to show carousel with the passed data

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

I want to send filtered data to the mz-photo-carousel directive like this:

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

I dont want to filter inside the mz-photo-carousel directive because I want to leave it generic to deal with only data that it gets.

This code isn't enough to understand the issue, could you please share a [JSFiddle](https://jsfiddle.net/) with the problem! — Naren Murali, Sep 10 '17 at 12:36
here is a JSFiddle for you guys: http://jsfiddle.net/y9arvut1/1/ look at this line of code: Im trying to pass a filtered array to the directive and I get errors in the console — Ron Yaari, Sep 10 '17 at 18:07

score 0 · Answer 1 · answered Sep 10 '17 at 18:38

The problem is that since you set two way data binding to the array attribute.

Reference taken from the SO Answer:

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.

So inorder to eliminate the error. Use the filter inside the directive using the below JS. Demo is also provided.

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];   

};

This answer is not really helpful, as I said before, I don't want to use the filter inside the directive meaning I dont want any use of $filter in link function or filter inside the directive html or any other options that force me to filter inside the directive. I simply want to filter outside the directive and get the filtered value as param to the directive as I show in the demo — Ron Yaari, Sep 17 '17 at 11:30
@RonYaari Ok I get it, you have a problem with this method, another option is to use `$watch` , please refer this [JSFiddle](http://jsfiddle.net/zmjn5q33/), but please note, if you use filtering like what is done fiddle you have, that will trigger the error `10 $digest() iterations reached.` — Naren Murali, Sep 17 '17 at 11:41
what you offered with the $watch still not good enough for my case, because you still filter the array in the controller, my simple question is that if there anyway to filter it like this: — Ron Yaari, Sep 17 '17 at 14:43
@RonYaari Applogies, I don't know the solution to this :( Thanks for your time! — Naren Murali, Sep 17 '17 at 14:48

How to send filtered param to a directive

1 Answers1