Angularjs filter callback

Question

I have a list of items that are being filtered with an Angularjs filter. Here is Jade markup:

li(ng-repeat="parcel in parcels | filter : filterActiveAreaParcels")

I want to run some jQuery plugin that enhances the look of loaded elements after the filter function runs and elements are rendered in DOM. How can I do it?

Answer 1

Assuming that your filter is not doing some crazy asynchronous stuff and your parcel list has a reasonable number of items (see Misko's SO answer here) than this plnkr should do the job. Notice how custom filter in this plnkr is doing some relatively expensive operation (looping over 1m iterations), but $scope.$watch inside the my-plugin directive is still able to call the jquery plugin on time for each filtered item in the list.

In case your jquery plugin is still being called before ng-repeat is done than you might try with $timeout() inside the directive.