Angularjs – Angular custom directive with filter in attribute


I would like make angular directive where I use filter on data which are passed as argument.

So something like this:

<div class="my-module" data="a in array | orFilter:filter"></div>

Where "data" is attribute of directive "my-module".
I looked into ngRepeat source, but they parse ng-repeat argument and then they evaluate them. I can't use ng-repeat because I'm creating new instance of object (Marker for map) from data parameter.

Is it realy so hard? Is possible do this in custom directive and how?

Small example what i want:


I'm trying extend this map wrapper to render filtered markers.

My potencional solution is holding copy of all markers and visible markers. Add $watch to filter and when filter was changed call $scope.markers = $scope.$eval("allMarkers | orFilter:filter");.

With this solution we need hold two copy of all markers (~500).

Best Solution

You can $eval the filter expression.

in your directive link function:

elem.text( scope.$eval( ).join(', ') );

in your template:

<div my-directive data="['Hello', 'xxx', 'World'] | filter:'o'"></div>

and the directive renders (by filtering-out 'xxx') to:

Hello, World


If the values are dynamic, you can of course do:

scope.$watch(, function( arr ) {
  elem.text( arr.join(', ') );

I do not think you can avoid having $watch, though.