How does Angular's HTML compiler arrange the order for compiling?
2,174 views
Skip to first unread message
Colin Huang
Feb 20, 2013, 3:57:40 PM2/20/13
to ang...@googlegroups.com
When there are multiple directives across multiple elements on a page, how does Angular's HTML compiler arrange the order for compiling?
Say I have the following markups, where alpha, beta, and gamma are custom Angular directives,
<html ng-app>
<alpha><beta></beta></alpha>
<gamma></gamma>
</html>
What's the order the compiler would work on them? Is it alpha => gamma => beta? Or is it alpha => beta => gamma?
To complicate things a little bit more, consider alpha directive's template has another custom directive, called foo. When would foo get compiled? After all of the above directives get compiled? Or right after alpha is compiled?
Peter Bacon Darwin
Feb 20, 2013, 5:00:46 PM2/20/13
to ang...@googlegroups.com
The compilation works depth first down. So html->alpha->beta->gamma
But the post link functions come back up So gamma->beta->alpha-html
Moreover if you have multiple directives on an element, they are compiled in order of their priority value, highest first, with directives of the same priority having undetermined order.
I find this quite helpful: http://plnkr.co/edit/qrDMJBlnwdNlfBqEEXL2?p=preview
--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
Colin Huang
Feb 20, 2013, 5:23:13 PM2/20/13
to ang...@googlegroups.com
Thanks Peter.
Your said that the post link functions are applied in the reverse of depth first down but that's not what your plnkr shows. According to your plnkr, the post link functions, for my example, should have ben applied in the order beta => alpha => gamma => html. What's the right order here?
Peter Bacon Darwin
Feb 21, 2013, 3:01:55 PM2/21/13
to ang...@googlegroups.com
Yes, you are right, it is not exactly the reverse but it is bottom up.
Johnny Hauser
Aug 4, 2013, 10:34:52 PM8/4/13
to ang...@googlegroups.com
Considering this markup with a directive "foo":
<div foo run="3">
<div foo run="1">
<div foo run="2">
What is a good approach for causing "foo" to run in the specified order rather than from top to bottom (3,1,2)?
The only thing I can think to do would be tracking what has run and returning false on the items that are not in order, then making angular try to run them all again and repeat until they are all done. That sounds terrible to me though, because it would have to repeat so many times..
<div foo run="3">
<div foo run="1">
<div foo run="2">
What is a good approach for causing "foo" to run in the specified order rather than from top to bottom (3,1,2)?
The only thing I can think to do would be tracking what has run and returning false on the items that are not in order, then making angular try to run them all again and repeat until they are all done. That sounds terrible to me though, because it would have to repeat so many times..
Grant Rettke
Aug 4, 2013, 11:04:36 PM8/4/13
to ang...@googlegroups.com
Perhaps priority? I have never tried it out though.
http://docs.angularjs.org/guide/directive
"priority - When there are multiple directives defined on a single DOM
element, sometimes it is necessary to specify the order in which the
directives are applied. The priority is used to sort the directives
before their compile functions get called. Priority is defined as a
number. Directives with greater numerical priority are compiled first.
The order of directives with the same priority is undefined. The
default priority is 0."
> Visit this group at http://groups.google.com/group/angular.
--
Grant Rettke | ACM, AMA, COG, IEEE
gre...@acm.org | http://www.wisdomandwonder.com/
“Wisdom begins in wonder.” --Socrates
((λ (x) (x x)) (λ (x) (x x)))
“Life has become immeasurably better since I have been forced to stop
taking it seriously.” --Thompson
http://docs.angularjs.org/guide/directive
"priority - When there are multiple directives defined on a single DOM
element, sometimes it is necessary to specify the order in which the
directives are applied. The priority is used to sort the directives
before their compile functions get called. Priority is defined as a
number. Directives with greater numerical priority are compiled first.
The order of directives with the same priority is undefined. The
default priority is 0."
--
Grant Rettke | ACM, AMA, COG, IEEE
gre...@acm.org | http://www.wisdomandwonder.com/
“Wisdom begins in wonder.” --Socrates
((λ (x) (x x)) (λ (x) (x x)))
“Life has become immeasurably better since I have been forced to stop
taking it seriously.” --Thompson
Johnny Hauser
Aug 4, 2013, 11:06:39 PM8/4/13
to ang...@googlegroups.com
That isn't at all what I am referring to...it's almost the opposite. That is say...3 directive on one element. I mean one directive on 3 elements. "Priority" doesn't deal with that.
--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/3HsNz4ncnYA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
Johnny Hauser
Aug 5, 2013, 1:55:50 AM8/5/13
to ang...@googlegroups.com
I asked on stackoverflow and got this response that I am hopeful about. I will test in a real use scenario in the morning. http://stackoverflow.com/questions/18049894/angularjs-directive-setting-order-for-multiple-directive-elements-not-priorit
Johnny Hauser
Aug 5, 2013, 8:57:29 AM8/5/13
to ang...@googlegroups.com
That answer has been updated and is providing this functionality as seen here: http://jsfiddle.net/8aQSL/5/
Reply all
Reply to author
Forward
0 new messages