Making Your Own Google Tag In AngularJS

Playtime blog post!  So I made a custom tag on a lark the other day.  Here it is.

	<div ng-app="app">
	<my-google>Chef Ramsay</my-google>
	</div>

view raw google_tag_usage.html hosted with ❤ by GitHub

It is what it looks like.  It makes a link to Google with search results for Chef Ramsay.  Let's make this tag.

Taking Advantage Of Directives In Angular

Directives can do a few interesting things.  For this project, the goal is to make a new HTML tag.  A skeleton for this directive will get us started.

	var googleDirective = function(){
	var d = {};
	d.restrict = "E";
	return d;
	};
	angular.module("app", [])
	.directive("myGoogle", googleDirective);

view raw stub_directive.js hosted with ❤ by GitHub

We really just want this directive used as a tag element and nothing else.  Setting the restriction to "E" will impose that limit.

jQuery level manipulation sounds nice given what we're going for.  The link method that Angular allows for is good for that.  Let's stub that one out a little.

	var googleDirective = function(){
	var d = {};
	d.restrict = "E";
	d.link = function(scope, elem, attrs){
	};
	return d;
	};

view raw google_tag_link_stub.js hosted with ❤ by GitHub

What to do next?  That element argument is useful.  It's a jQuery object of sorts that seems to be referring to our custom tag.  What can we do with a jQuery object?  Messing with the information between the two "google" tags could be nice.

	var googleDirective = function(){
	var d = {};
	d.restrict = "E";
	d.link = function(scope, elem, attrs){
	var textBody = elem.html();
	var url = "http://www.google.com/search?q=" + escape(textBody)
	var searchTag = "<a href='" + url + "'>" + textBody + "</a>";
	elem.html(searchTag)
	};
	return d;
	};

view raw google_tag_complete_directive.js hosted with ❤ by GitHub

Pretty straight forward.  Grab the text.  Cut together a string representing a hyperlink.  Plug the resulting link back in.  All done.

In Summing Up

This is a just me fooling around here.  If custom tags are the sort of thing that you want to take a more serious look into, there are better tutorials out there.  Jakob Jenkov is one of my favorite resources for Angular JS and I recommend checking him out.  Just make sure to read his critique section first.  There's wisdom in what he's saying there.

And that's all for now.  Cheers.