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>`

https://app.egghead.io/api/v1/lessons/angularjs-hijacking-existing-html-attributes-with-angular-directives/subtitles

Hijacking Existing HTML Attributes with Angular Directives

[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.

Hijacking Existing HTML Attributes with Angular Directives

Share this video with your friends