Hijacking Existing HTML Attributes with Angular Directives

Trevor Ewen
InstructorTrevor Ewen
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 5 years ago

Angular overrides quite a few existing HTML elements and attributes. This can be a useful technique in our own applications. We will build a directive that adds additional functionality to the src property of an <img>

[00:00] A fundamental concept in AngularJS is extending HTML to produce dynamic behavior. We most commonly see this in the form of custom directives on element tags or, at times, custom attributes on existing elements. Sometimes, we throw a value in there.

[00:18] There are several other ways to do this. One clever way is something I like to refer to as "attribute hijacking." This is when you take an existing, understood HTML attribute and provide new behavior to it. The img src tag is a great example of this because it already behaves in a certain way in a browser, but yet we can extend and add behavior to it.

[00:39] When Angular creates another directive that mirrors that, it doesn't overwrite the behavior. It just extends it or does something new. That's really powerful. It's actually something that Angular does under the covers in several situations.

[00:51] If you take a look, we've got this directive right here, src. I'm just running a quick console log that says what kind of element this is, that has the src tag. Let's take a look at the page. It's three baby seals. Those are our three image tags.

[01:05] Let's take a look at what the log ran for us. It looks like there are three images running the link function, but there's also four scripts. This makes sense because the script tags in an index file also have an src attribute.

[01:23] Let's take this ng-app. I'm going to move it down. This may not always be the best solution, but in this case, we can get those scripts out of the scope of our Angular app and then just watch the things that we actually care about, which are the images. You can see all three of those ran in this case.

[01:39] What we want to do is give some credit to the sites where these images come from. All three of them come from third-party sites. Let's start taking a look at how we can do that. I'm going to get rid of the console log.

[01:52] We know that because we have a source attribute, we actually have the URL and domain that they come from. We might just need to do some parsing. I've taken the liberty of throwing the regular expressions right up there because you don't really want to see me figure those out in the middle of a video.

[02:10] I'm going to match the source attribute against a URL regular expression. I'm going to grab the first match. What that's going to do is give me a usable URL that I can use in an a tag or a link tag. I'm going to set context.domain to just that context.url, but I'm going to replace if there is an HTTP or HTTPS nothing.

[02:38] I'm going to create something called a "template function" using the _template function. What this'll do is it'll take some HTML from me. In this case, it's going to be the a tag. It's going to throw in the variables where I need them, from the context. That's going to be my URL.

[03:00] Right there, inside of there, we're going to make it target ="_blank". This'll make sure it opens up in a new page. I always like that for third-party links. This is going to say "Photo courtesy of." We're going to throw the domain right here so that's a more readable domain.

[03:18] We're getting all the information we need right out of the src tag. We've created this template function. Now, when we pass the new template function a context, we can use this element.after. That says, "Right after my element, place this."

[03:34] Template function's going to have a context. Template with this data. Let's save that. See how that looks. Now, without changing anything in the HTML, we automatically get a little reference tag back to the site that gave us the image.

egghead
egghead
~ 7 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today