1

I have a need to use the same directive within a directive, depending on a conditional param. However, when ever i try to do it, it seems to go to an endless loop. As i understand, it tries to pre-load the templates and that causes an endless recursion and at the end, it just throws me the following error:"RangeError: Maximum call stack size exceeded".

I have created an example in fiddle.. as you can see in the example, when the param's value is "1", it creates the error (even when the second level param is valued as "2" so it shouldn't have real recursion issues in the controller/app). https://jsfiddle.net/qh9nh1gx/

"custom-directive"'s template:

<div>
<div ng-if='info==1'><div custom-directive info='2'></div></div>
<div ng-if='info==2'>DONE,single.</div>
</div>

Thanks

Ben Yitzhaki
  • 1,376
  • 16
  • 31

2 Answers2

1

I have found 2 options to deal with the issue, the first one, is exactly what Jju described - creating a new "compiler" method (it can be grabbed from the url he sent). The second option - always using an additional template for the "recursive" parts of the directive. For example, in my directive, i had a "ng-repeat" part that depending on the items value, it could request to display the directive again. while i used "ng-include" to have the other directive, it worked.

<div ng-repeat="item in items" ng-include="'inline-possibly-recursive-template"'></div>

in that template, you can call the directive again without any issues..

I hope that it will anyone else that will stumble into that issue.

Ben Yitzhaki
  • 1,376
  • 16
  • 31
0

You can look into https://stackoverflow.com/a/19065910/1680674 that describe a common approach to create directive that use himself inside

Community
  • 1
  • 1
Jju
  • 135
  • 3