The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

angular.element

angular.element

8:40
A brief overview of using element in an AngularJS directive, and how to target one without jquery, and also how to use replace and compile function
Watch this lesson now
Avatar
egghead.io

A brief overview of using element in an AngularJS directive, and how to target one without jquery, and also how to use replace and compile function

Avatar
Nicholas Westby

How are you typing into a second window and having that markup be injected into a string into your first window in WebStorm? Looks really nifty.

Avatar
Roman Ganchenko

Alt-tab >
Edit HTML fragment

In reply to Nicholas Westby
Avatar
Karen

I don't get the 'this.link' 'return link' logic. Why do we assign link like this.link but then refer to it in compile section like just 'link'?

Avatar
John

I updated the code to show the proper "var link" approach (I had this corrected with an overlay on YouTube, but missed it in migrating the videos).

This approach is simply a convenience, nothing more. You can leave the link function as an anonymous function "link: function(){...}" if you'd like. The only tricky part is that a compile function returns a link function, so using compile (which is an edge case) will look much different than the standard way of just using "link: function()" on a directive definition object".

In reply to Karen
Avatar
Amit

You were probably just demoing features but this approach should not be used in actual app as directive function is not executed repeatedly. And having multiple instances of directive breaks this example. Am I correct?

Avatar
Paul

angular 1.5.3 seems to provide more jquery support e.g. eq(1) and find('selector')

In reply to egghead.io
Avatar
Paul

Another high standard tutorial from John. So easy to follow. I doth my cap.

Question: Why append the element in compile and not in the link function since they can both append to the directive element?

As far as I can see, the benefit of compile is when properties of the directive need manipulation. The element is available to compile in case it need manipulation as a result of changing directive properties.

Are there any other tutorials which unleash what compile can really do?

In reply to egghead.io
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?