Before AngularJS 1.2, if you wanted a directive to transclude its element, you had to define the compile() function so that you could get a reference to the transclude() function. This was because the compile() function was the only place the transclude() function was made available (outside of explicit calls to $compile). As such, you ended up with a number of directives that had a non-functional - but required - compile() wrapper.
With AngularJS 1.2, however, this superfluos compile wrapper is no longer necessary; if your directive configuration defines transclusion, the transclusion function is now passed directly into the link() function as the fifth (5th) argument, after the optional controller(s) argument.
To see this in action, I created a simple demo that uses both the old [deprecated] and the new approaches to transclude() function injection:
Both of the above directives do the exact same thing; only, the second one doesn't use or require the compile() function in order to access the transclude() function. This is a fairly cosmetic change - but it is certainly a much cleaner and much more convenient approach. I'm really glad they went in this direction.
Want to use code from this post? Check out the license.
With Angular it seems more powerful but less mature as a platform. One of the struggles CFML has is there are not as many solutions as richly supported by developers as WordPress. We have some CMS solutions but not with as many plugin apps or skin themes.
Likewise it reminds me of the early days of jQuery when there were very few plugins. It made coding easier but it is clear things like jQuery UI have been big game changers. Even companies like Telerik with KendoUI and similar solutions are proof of concept to having a robust "full featured" starting point wins for many.
I was looking at the AngularJS UI library that works with Bootstrap. They are working on version 3 bootstrap compatibility but it's a work in progress.
So here is my question. When building a customer site the need to update things often means new code updates of core libraries. How would you rate the maturity of AngularJS in terms of sustainable code issues?
All good questions. I was just listening to a podcast where the guest was talking about AngularJS vs. EmberJS. One of the things he said that he liked about Ember was that it was very opinionated; that if you went from one EmberJS team to another, you would be able to get around the app because all EmberJS apps work in similar ways (this is what I remember he said - but not working with EmberJS, I cannot verify).
AngularJS, on the other hand, is a lot more open-ended; and, an AngularJS app built by one team may work in a completely different way than an AngularJS app built by another team.
So, this difference in philosophy likely has its own set of pros / cons.
As far as code changes, we are about to upgrade from AngularJS 1.0.2 to 1.0.8. This jump only has a few minor breaking changes that are mostly tied to some CSS tweaks and some poorly written code (meaning, bad code that didn't cause a problem before will start to cause a problem now).
That said, trying to go from 1.0.8 to 1.2 would be a HUGE jump for our app and requiring a significant amount of code-rework. The big jump in 1.2 revolves around animations which seemed to required a different DOM structure (which is where our approach gets screwed over a bit).
The DOM fixes are easy; but, they would be so wide spread in the app that it would be a non-trivial change.
At the end of the day, AngularJS still sits on top of jQuery (or JQLite if you don't include the jQuery library); so, anything you can do with jQuery you can do with AngularJS. It's just that AngularJS has a strict definition as to where certain types of code should go.
All in all, I really do like it a lot!
Mr. Nadel, as I am researching my problem:
I ran into this post, so here's my question to you:
Do you think, using a special approach on the transclude function, there is a way to completely change the directive's element, but retain all the ng-directives functionality? (ngIf, ngHide..)
Another thing worth pointing out is around the order of compile / link phases of parent directive and transcluded content. Normally Angular compiles way down and links way up. But the fact that transclude function is called in the link function of the parent directive implies that you get a chance to call the parent's link function prior to calling the link function of the transcluded content.