Using filter on directive attribute causes infinite loop in $digest cycle

Question

An attempt to use a filter on a directive with isolate scope:

<div tags="p.tags | refTags"></div>

Causes an infinite loop in the $digest cycle:

This error occurs when the application's model becomes unstable and each $digest cycle triggers a state change and subsequent $digest cycle. Angular detects this situation and prevents an infinite loop from causing the browser to become unresponsive.

.directive 'tags', ->
    restrict: 'A'
    scope:
        tags: '='
    templateUrl: 'partials/tags.html'


.filter 'refTags', ->
    (tags) ->
        ['a filtered', 'array of values']

partials/tags.html

<ul>
    <li ng-repeat="tag in tags">{{tag.tag}}</li>
</ul>

p.tags in the controller

p.tags = ['HTML5', 'CSS', 'JavaScript', 'Angular JS', 'Backbone JS', 'Node JS', 'SASS + Compass', 'Oragami', 'Running', 'Cat Food', '#catfood']

Is this behavior normal?

Can a filter not be use on a value passing in to the isolate scope of a directive?
Is there a workaround for this? I need to filter the arrays values
Is there another solution with a different design?

That's not the complete refTags filter is it? Can you share that code? — Jonathan Rowny, Jan 13 '14 at 19:55
Yes, that's all there is. It's coffeescript if that is causing any confusion — TaylorMac, Jan 13 '14 at 19:56
So your filter is actually returning an array with two items 'a filtered' and 'array of values'... how is it actually filtering those values? — Jonathan Rowny, Jan 13 '14 at 19:57
`=` is a two way binding, how does it bind back if it is filtered? I would imagine that it is binding to the p.tags, triggering the filter again, updating the value, then the binding is triggering the filter again... over and over — TheSharpieOne, Jan 13 '14 at 20:03
@Janathan Rowny I see your comment below. I was unaware that angular was monitoring the model — TaylorMac, Jan 13 '14 at 20:06

score 5 · Accepted Answer · edited Dec 12 '15 at 00:13

5

I don't think it is a directive problem but a filter problem. The goal of filter is to get an array as input and return another array based on some rules and conditions, where array items have the same structure as input.

The reason that causes an infinite loop in the $digest cycle is that in a filter, each digest cycle filter returns a different object that causes an additional cycle.

I suggest you to start by returning the same array, i.e. input = output. Check if all works as expected. After that add the relevant condition.

edited Dec 12 '15 at 00:13

Nathaniel Ford

20,545
20
91
102

answered Jan 13 '14 at 20:04

Maxim Shoustin

77,483
27
203
225

Agreed, if you're just returning an arbitrary array in filter, Angular doesn't recognize the model your filter is returning and digest keep on going. – Jonathan Rowny Jan 13 '14 at 20:05
Thank you Maxim and Jonathan. That clears things up. Excellent – TaylorMac Jan 13 '14 at 20:06
@TaylorMac if you ever do a `console.log()` on a model, you'll see Angular assigns a bunch of stuff to it to keep track of it. That's another reason primitives are difficult for Angular because it can't assign its meta data to a string. – Jonathan Rowny Jan 13 '14 at 20:11

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

This question provides an actual workaround.

In short, pass the filter you want to use into your directive as well, and then use it there.

edited May 23 '17 at 11:51

Community

1
1

answered Dec 11 '15 at 23:50

user2863530

11
1

You should definitely link the original question/answer, but pull the salient details into this question and apply it directly to the problem presented here. Or, if the questions are identical, you can mark one a duplicate. – Nathaniel Ford Dec 12 '15 at 00:09

Using filter on directive attribute causes infinite loop in $digest cycle

2 Answers2

Linked