How to handle recursion in component directives?
4,056 views
Skip to first unread message
cambiata
Apr 18, 2012, 8:40:03 AM4/18/12
to ang...@googlegroups.com
Here's a stub for a simple tree component.
The idea is to feed the component with an array, passing any subarrays further to a child instance of the component itself:
http://jsfiddle.net/cambiata/pTZzL/
However - no output. (It seems to cause endless recursion.)
Any ideas how to solve this?
Regards / Jonas
The idea is to feed the component with an array, passing any subarrays further to a child instance of the component itself:
http://jsfiddle.net/cambiata/pTZzL/
However - no output. (It seems to cause endless recursion.)
Any ideas how to solve this?
Regards / Jonas
oluckyman
Apr 19, 2012, 4:42:20 AM4/19/12
to ang...@googlegroups.com
Jonas:
It's not reasonable to expect that to work because there is no way for the recursion to bottom out.
On the other hand, this might be expected to work (i.e. there could conceivably be an implementation for which it works):
<html ng-app="TreeApp">
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc5.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function treeController($scope) {
};
angular.module('components', [])
.filter('ifarray', function() {
return function(input) {
return $.isArray(input)?input:[];
}
})
.directive('tree', function() {
return {
restrict: 'E',
scope: {val:'evaluate'},
template: '<div>{{val}}<tree ng-repeat="item in val|ifarray" val="item"></tree></div>'
}
});
angular.module('TreeApp', ['components']);
</script>
</head>
<body ng-controller="treeController" >
<tree val="['a','b',['c1','c2']]"></tree>
</body>
</html>
But it also gets stuck in an infinite loop, presumably because the expansion is done before the ng-repeat is processed.
I don't know if it's possible with a more sophisticated approach.
--Paul
Suller Andras
Apr 19, 2012, 5:50:01 AM4/19/12
to ang...@googlegroups.com
You can try to use ng-include, Misko created a demo:
https://groups.google.com/d/msg/angular/Dp2hJBC3VPw/2m99fJD0E00J
https://groups.google.com/d/msg/angular/Dp2hJBC3VPw/2m99fJD0E00J
Andras
oluckyman
Apr 19, 2012, 8:42:35 AM4/19/12
to ang...@googlegroups.com
Thanks Andras!
Jeremy Elbourn
Apr 23, 2012, 1:40:53 PM4/23/12
to ang...@googlegroups.com
The demo linked doesn't seem to work with 1.0.0rc6.
Igor Minar
Apr 23, 2012, 2:29:57 PM4/23/12
to ang...@googlegroups.com
you can't use the template property because you need to stop the recursion based on the data you have, which means that the template can't be "static" but rather incrementally compiled within the linking function.
check this out: http://jsfiddle.net/IgorMinar/CHVbb/423/
/i
--To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/trhDNd13w9gJ.
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.
Jeremy Elbourn
Apr 30, 2012, 5:23:21 PM4/30/12
to ang...@googlegroups.com
I've been building a tree based on the concept in Igor's fiddle, but I've found that this method causes an exception in IE 7/8 (can be observed in said fiddle). The error occurs when appending to element in the linking function at the second level of depth. The error is: "Unexpected call to method or property access".
From what I can tell, this has to do with IE7/8 being picky about which elements they will allow you to append to other elements; this can come up if you try to do something like appending ill-formatted markup or appending an element to an invalid parent.
I have done a document.createElement for each non-standard element I use and have the xmlns:ng set on the html element. Here is a modified version of Igor's fiddle with these compatibility parts; the error can still be seen to occur. I haven't been able to reproduce this error by just doing appends with jQuery outside of an angular application; in this case the browser seems to have no problem appending to and from <tree> elements.
Has anyone else encountered a similar issue with an attempted recursive directive?
Message has been deleted
cmsa...@gmail.com
Jun 20, 2012, 1:22:27 PM6/20/12
to ang...@googlegroups.com
I get "Error: Invalid isolate scope definition for directive tree: evaluate" with angularjs 1.0.0. I assume this is because evaluate has been removed. What is the best way to handle recursion now?
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.
a...@trifork.com
Aug 15, 2012, 5:33:40 PM8/15/12
to ang...@googlegroups.com
I have created a version based on chrisg's version which does not compile once for every node, and therefore should perform better.
http://jsfiddle.net/ag5zC/1/
On Saturday, July 14, 2012 2:05:50 AM UTC+2, chrisg wrote:
On Saturday, July 14, 2012 2:05:50 AM UTC+2, chrisg wrote:
Here's an example based on Igor's approach that binds to a more filled out structure. Console looks clean (on chrome).http://jsfiddle.net/galloc/KNM4q/1/
On Friday, July 13, 2012 6:59:51 PM UTC-4, chrisg wrote:I got this working by changing the scope object to { val: '=' }. However, I get the following error twice:Error: 10 $digest() iterations reached. Aborting! Followed by a dump of watchers. So something's up.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages