AngularJS Tutorial - Part 18 - Deep Dive into Custom Directives Video Lecture - IT & Software

I'm going to be digging a little bit
deep into custom directives today we
have 40 minutes I'd like to start by
asking a couple of questions first of
all can I get by a show of hands if
you've written a custom directive would
you raise your hand Hey Wow the world's
authority on directive authorship is in
this room right now let's hope the big
wasps head earthquake doesn't happen
alright so my name is Dave I work for
higher view I'm on the front end team
there are five of us about we started
using angular in November of 2012 we had
a unique opportunity to rewrite our
pretty much our entire web-based UI
which is a really it was a great
opportunity we almost went with backbone
but it was good oh oh oh um scandal when
we first started I wanted to use angular
at arm's reach I wanted to make sure
that we didn't get too married to it
because you know this thing's kind of
crazy and weird and I'm not sure my
markup will valid anymore and so we
didn't do things like write custom
services or directives at first but
after a few weeks of using it one of my
co-workers came to me and said check
this out I can write this little
directive thing here and plunk it into
the app and all over the place and it'll
look and behave the same and I was like
that's really cool since then we've
written 146 directives which means we're
just a little bit cooler than
double-click right
just just a little bit so got some links
you can check out later first I'd like
start with a really bad joke this will
be funny if you know something about
directives well it might not be funny
and it'll be hilarious at the end of the
talk so just if it's not funny now don't
worry so what did the directives say
after getting cut out of its parents
will I'm isolated yet it doesn't inherit
from the parents okay so yeah now we're
foods coming right okay yeah took a
little explaining it'll be even funnier
later I I think so a couple of terms I
hope you're comfortable with based on
what we've heard so far I think everyone
should be so first of all angular has a
lot of built-in directives here's just a
list you'll see these all over the place
I think a lot of times people use
angular and don't realize when they
write ng-repeat they're actually
invoking a directive whose code they
could go read but I'd like to talk a
little bit about naming so let's say
you're going to write your own first of
all I strongly I have some principles
that my team has adopted that we found
useful the first one is to use a unique
prefix for all your directives to not to
avoid clashing with other people's I
don't think non angular directives
should use the ng prefix generally
because to me that denotes that it's an
internal prefix but it can be confusing
to read someone's directive that doesn't
have a prefix at all and you find
yourself wondering is this just HTML
attribute that I don't know about yet or
is it a directive and it's nice to know
the difference two letters is pretty
common I've seen that the angular UI
team uses UI at higher view we use HV
for everything for this talk I'll use my
dash for all the prefixes just so
that'll be obvious so if you used a two
letter prefix with letters and numbers
that's 1296 prefixes which ought to be
enough for anyone right 640k
let's look at some code from angular
this is a directive that I think
everyone has used raise your hand if
you've used this no raise native you
haven't used mg show okay there's like 1
2 3 good right but by and large most
people will use this when they start
using angular here's what it looks like
in the code it's a very simple directive
it does use animation we
we'll talk about that right now but all
it does is return a function that
watches an attribute that you give it
and anytime that apps Ruby becomes
truthy it removes a class from the
element called ng-hide and whenever it
becomes faulty it adds an element called
ng-hide and it's that simple and then
there's a CSS rule of course that will
cause ng-hide did not display notice of
the naming here when you name a
directive in JavaScript you use
camelcase ng capital S Show but in HTML
you use it with a - so that's normalized
names for directors in the JavaScript
just keep that in mind as you look at
the code here here's a more complicated
one directives can get pretty
complicated though I recommend you know
avoiding that but here's the ng class
does anyone use ng class before this is
a simple directive that you use to
specify class names that you would like
at runtime to be added and removed to an
element and the code here is I've
actually stripped it down to be a little
bit more readable but the idea here is
you just watch an attribute observe the
class value and you fill in the classes
whenever that attribute changes based on
what it tells you to do the attribute
that you give to ng class can return an
array of classes that it should have or
return an object that points to classes
whatnot but anyway so just wanted to
point this out these are all available
in the angular source code and they're
pretty approachable so I recommend that
when you want to see how directives work
a great way to go is read the angular
code so when do we use them there are
two or three main places where you want
to use a directive the first one and my
personal favorite is to create HTML
components in the future this will be
baked into browsers - you know in the
form of web components but for now
angular gives us this and you can make
your own custom tags an example would be
my widget this is where you could plunk
down on my widget tag wherever you want
and it'll magically be filled in with
other HTML another use the second one
here is for HTML behavior these are
typically attribute directive like ng
click this is when you want to specify
in your HTML that on certain actions you
want special code to take to execute so
in the case of ng click you specify an
angular expression that will be executed
any time the user clicks on that element
really common use case is to wrap up
jQuery plugins because you know you're
maybe you're building an angular app and
it's awesome but you are like how do I
bring in my jQuery plugins the answer is
always almost always to use an angular
directive that you write or that's
available many many
angular libraries exist out on the web
that you can find UI date is an example
of one from the angular UI team that I
personally have used several times and
the bottom line is anytime you want to
interact with the Dom from your
JavaScript code that's when a directive
is called for it's typically bad
practice and angular to interact with
the Dom anywhere else in a controller in
a service it's bad and the reason it's
bad is because it makes your code less
testable and more coupled to the Dom so
let's write one first things first I
recommend whenever you write a custom
directive you put it inside of its own
module don't just add it to your
application module but create a new
module which you can see here our first
line is doing and the way you know we're
creating a module instead of referencing
an existing one is based on the empty
array brackets up there so here we're
gonna create one called my directives oh
and the reason you do that is to make
your directives independently unit
testable from the rest of your
application so you can test your
directives without loading your whole
app when you then want to use your
directives you have to add your
directives module name to your
application module or else they won't be
available in the mark-up an angular
won't know they exist when it encounters
them in the Dom this is a common one to
overlook anytime you bring in a
third-party directive from that you may
be found on the web you have to go add
it to your application module the name
of its life of its module the directives
module or else angular will just not
know what it is when it encounters it in
the Dom okay and then you register your
directive by getting a reference to your
module and then just saying directive
and you get a function and we'll fill
that in later in this case you could use
it by throwing it in the HTML on a div
for example with my directive and notice
again the naming conventions my -
directive in the HTML and my capital D
directive in the JavaScript so let's
create one that actually does something
so one of the cool a cool little feature
you could make a textbox a behavioral
directive to extend a text box behavior
would be to make it so that if you have
a text box with text in it and the user
clicks in that box you want to
automatically select all the text
this is kind of like how your browser
address bar works right you click in it
and it doesn't auto select of the whole
thing so if I wanted to do that
creating a directive called select all
on focus so notice I forgot the my
prefix that was my mistake
I would do that like this I would get my
module directives I would declare my
directive with the directive function
and I would return an object that
describes my directive we'll talk a
little bit about that restrict property
in a few minutes but this in this case
the important function is the link
function this function will be called on
your directive by angular when it
encounters your directive in the Dom and
what we're going to do oh and you'll
call it once per directive instance in
the Dom what we're going to do in this
case is we're going to catch the mouse
up event and we're going to tell it to
prevent default so that the text doesn't
get unhighlight 'add and then any time
it gets focused we're going to say
element dot select which will cause all
the text in the textbox to automatically
select and it's just that simple so
previous to angular directives you would
have had to write jQuery selectors say
to locate all the boxes that you want to
have this behavior and tell it to do
this behavior excuse me
but with angular all you got to do is
throw that on any box you want to behave
this way super simple just like that
note also that the link function takes
arguments that are not dependency
injected that's important to keep note
of it takes four arguments in order
they're positional we'll talk about the
other two later but in this case we just
wanted the element object which is
actually wrapped up as a jQuery object
if you have to query on your page or a
JQ light object if you don't but it has
many of the jQuery features in this case
we did okay oh there we go so a little
pop quiz then in this case we have two
input boxes one with a that's called
name one called age and they both have
our new directive called select all with
focus so just pop quiz for the group how
many times will my directives link
function be called just hold it up with
your hand very good excellent two times
that's because it encountered it once
what about the directive function back
here this guy up here how many times
will that be called one yeah excellent
it's one time just one time only on
application load and bonus points if
you're a directive expert how many times
will the times will the compile function
of this directive be called that I
haven't written I'm seeing ones and twos
okay we'll come back to that later
hold on to that one I told you I'd come
back to the restrict thing let's talk
about that so one of the properties your
directive can specify when it's
registered is how you want it to be
usable in the markup in this case we've
used just the letter A and that stands
for attribute in this case it means we
are only allowing our directive to exist
on an element's attribute so you can see
here div with a my directive attribute
is how you use that the other common
usage is to use the letter e which means
I want this directive to be a custom
element or tag name and you would use it
like I show there there are a couple of
other ways to do this that are less
utilized you can use C for classes so
you could have a directive execute any
time it encounters in class and M for
comments no comment on when you would do
that but it is possible not sure if it
will still be possible that is at least
now let's do a widget now so the last
one we did was behavioral now we're
going to do a widget this is like a
custom component so let's say you have a
block of little social sharing buttons
on your page that you want to be able to
put out you know at any given point on
the page you don't want to have to copy
and paste these four or five lines of
code everywhere they get used of course
so instead we create a little my social
buttons directive we want it to expand
to what's down there below which is just
a simple div three links with a couple
of font awesome icons in them and
they're clickable and the HFS go to x
y&z nothing special there those are just
placeholders for actual URLs let's see
how we do that so first of all we
register our directive using our
camelcase naming convention my social
buttons we return an object with
properties for restrict of e because we
only want it to be usable as an element
and in this case we're going to actually
have an inline JavaScript string that
describes the HTML template that we want
to we want that directive to expand to
this is very simple a very very simple
custom directive but the concept that's
introduced here is templates you can
type your HTML your HTML right into your
JavaScript if you want you could even
put curly brace expressions inside this
HTML and they'll be expanded and bound
you can also specify a template URL and
ask angular to go fetch the template
code from the
it will do that exactly once per
directive and cache it using the HTTP
template cache that are sorry using the
template cache cache object when it does
the HTTP GET so just like that and this
is actually the way I prefer it and
we've actually gone with most of our
directives one step further and we've
done an optimization so that all of the
directive HTML loads in the root page in
script tags with an ID that's equal to
the URL where they could be found and
doing that causes angular to go find it
there instead of having to go back to
the server to get it which is you know
there are trade-offs there but if you
want there to be no round-trip costs
when every new directive gets
encountered by angular that's the way to
get around that okay so now let's do an
interactive widget so let's say we want
to we want a common pattern for a search
box that we can put on our app but it
will be searching different things when
we use it in different places so in this
case we're just going to make a
component or sorry an element directive
called my search box it will expose an
API via its HTML attributes and you
specify those right there with HTML
attributes in this case we've caught
we've called one search text so that you
can know what set text the user typed in
and the other is called placeholder
which will let you specify to the
directive what placeholder text you want
it to use and then we want it to look
like this to expand that in the browser
so how do we do that let's take a look
so first step we register our search box
using the my search box camelcase naming
convention we restrict it to elements
only with the e and now we're
introducing a new property you can
specify for your directives called scope
this gives your directive its own unique
scope that's independent from the scope
in which the directive exists and in
this case we're saying there are three
properties in this scope search text
placeholder and used lucky which we'll
talk about in a minute and this scope is
isolated and it's isolated in the way we
talked about earlier meaning it will not
inherit from its parents will or parent
scope and the way this works in this
case is we've specified our HTML here in
the template and we've even given it
some ng
like stuff so this demonstrates that you
can nest angular directives within each
other and we'll show you how that works
here in just a second
other thing to point out here is this
searchtext
name is camel cased but in the HTML it's
- delimited it's the same name
normalization from your HTML attributes
as into your JavaScript as is for the
angular names so in this case also we've
used an equal sign binding here an at
sign binding here another equal sign
I'll go into detail on what those are
when you isolate scope in a directive
you can specify these parameters and
they serve as the API - for the scope -
tor sorry for the directive to speak to
the outside world you can also if you
just want to isolate the scope of your
directive but not actually have an API
you can just say scope true it's really
important to remember though that doing
this causes your directive to not
inherit the scope properties from the
enclosing scope that's important because
that actually creates a nicely designed
component that is independent of where
you put it on your page that's important
for a lot of reasons the first one being
that it creates a clean interface
between the directive and the caller
it's a contract it prevents the
directive from reaching outside of its
bounds and messing with scope outside
which means you can more safely use
third-party directives or your peers
directives without worrying that they're
going to reach out and mess with your
own scope it encourages reuse because it
has a clean contract and it discourages
guilty knowledge of context in the
directive which also encourages reuse
and the real beauty of this is that it
makes it totally testable in isolation
because I can instantiate this directive
in a unit test without having to worry
about enclosing environment at all so
the parameters note we use that equal
sign and that at sign there are three
options here the equal sign means I
would like to have a parameter that is
bound to an outside parameter that the
caller can specify in this case we said
search text in our directive we're
working on and what that means is that
anytime the directive changes the search
text scope variable the outside callers
variable whatever they named it will
also change to match
and if the outside color makes a change
likewise the directives property will
also change so very useful for
communicating between your directive and
an outside caller who you don't know
about two-way binding sometimes I call
this a reference binding because
effectively what you're doing is
creating a reference to the same value
the other method is using at sign and I
like to call this top-down binding it's
not even really binding but the idea
here is that the caller can specify a
string that has interpolate able values
inside of it see an example down here
with parameter this is so that the
caller can use its scope variables to
pass a string that has dynamic bits in
it into the directive and the directive
can display that on the screen
great for placeholder text like we were
just going to use and the third way is
to use the ampersand and this is so that
the directive can do bottom-up
communication out to the to the
enclosing environment the idea here
being like ng click for example the
directive ng click knows nothing about
your code but you can give it an
expression that will execute that ng
click will execute for you whenever a
click event happens and that code that
it runs will run in the context of your
scope so again it doesn't the directive
itself does not have to know anything
about it so by reference for equal sign
top down without sign bottom up with the
ampersand that's how I like to remember
it so now let's finish it up so now
we're going to look at the code for that
search box we did create a scope with
equal sign binding on the search text
that way whenever the user types we can
immediately know what the value is
outside of the directive placeholder
text so that callers can give us text
maybe with dynamic bits maybe not as a
string and then they use lucky parameter
will tell us if they click the use lucky
button to initiate the search so how
does this work we have a link function I
took out the template just for brevity
the link function is going to set up two
new properties on the scope that are
going to be those callback functions
that we referenced here just a minute
ago
like our ng model I sorry our two ng
clicks here search clicked and lucky
click those are just on the buttons and
when those get clicked we're just going
to copy what
the users search text was into the
search text for the outside person to
see and the reason we do that is just so
that they don't get every keystroke they
just get it when the user actually says
I want to do a search and then we set
used lucky equals false or true
depending on which way they they clicked
so that's it now we have a search box
that will render HTML of the page
consistently anytime you use it it has
behavior associated with that HT with
that same directive and Outsiders have a
nice clean contract that they can use
whenever they want to communicate with
it just like that okay so using a scope
property is not the only way to pass
data into your directive the other way
is to use HTML attributes and the way
you do that is using the adders that's
how I pronounce it object that is the
third argument to every directives link
function you can pull string values out
angular will normalize all the names of
your HTML attributes and then you can
pull string values out of those and
store them however you like you can see
an example here we've got a controller
and I want to create a my directive
instance and pass it in some data the
way I do that in this case is I've got
this expression I've actually put a JSON
object literal a JavaScript object
literal into my directives attribute and
then the directive itself can pull that
value out using this adders that my
directive and then evaluate it using the
scope so what this options object will
end up being is this actual JavaScript
object with some variable evaluated at
the time that the link function ran from
the enclosing scope now the directive
itself doesn't know anything about some
variable that was passed in by the
caller and then in this case it'll end
up being foo with a value of 1 and bar
with a value of 42 so this can be a
little confusing so I think it's worth
going over again but the scope here is
actually the scope from the enclosing
environment not the directive in this
case does not have its own scope so it
knows how to use that scope to evaluate
any expression you give it as an
attribute value so why would you want to
do this Oh
first of all also you can notice when
these values change by using adders dot
observe and dot set to change them and
to be notified of them
and the reason you would want to do this
is so is because it's not a watch on the
on the scope it's a little faster it's
independent of the digest loop
completely so if you want to pass in
data this way and you actually call set
on it change the attributes the director
will be notified but it doesn't have to
watch scope variables and do dirty
checking or anything like that
so oh the other reason is if you don't
want to introduce a new scope that by
creating the scope property and you can
do it this way and pass in just as rich
a set of data as you could from passing
in a scope property ok the next concept
I want to talk about is compiling
compiling and linking at first when I
saw these terms I was like why are we
compiling and linking and I come from a
C++ background and so to me compiling is
where you take your source code compile
it into an object file and linking is
when you take a bunch of object files
and link it into a final executable this
is this is similar but it's a little bit
different to introduce it I think it's
best to consider what other tools do
like handlebars here's a handlebars
example when handlebars gets a template
string it compiles it and what it
returns is actually a function that you
can call with context and what that
returns is a rendered HTML string in
this case the angular's compile and Link
is actually very similar except instead
of operating on strings and returning
strings it operates Dom and manipulates
Dom as the output so a compiled function
takes an element and returns a link
function which you can then call with
and pass at a scope and then the Scout
you'll use the scope to evaluate what
the current context should be and render
the Dom directly to the browser using
that scope so how do I know if I need to
use a compile function in my directive
or not so take a look at some of these
directives that come with angular
ng-repeat ng-if and ng-switch
and the reason you need a compile
function is when your directive needs to
make Dom changes like by pulling things
out of the Dom putting them into the Dom
after link time so like if you want and
that's this is exactly what ng-repeat
does think about it if i've got an array
of 3 elements and I've got an NG repeat
watching that array
if I add a fourth element to the array
what's it got to do let's got to go back
to the original source template and
relink it again except this time within
that new fourth object as its scope and
what if I pull an element out of the
array same thing it's got to pull that
element out of the top and so that's why
it needs to hang on to the compiled
result of the original source template
for ng-repeat so that later it can
reapply it as it adds and removes
elements
same thing is true of ng-switch because
it actually removes elements from the
dom depending on which ng-switch case is
currently active so generally speaking
whenever you need to reuse your source
HTML template multiple times that's when
you need a compile step in your
directive of all the hundred and forty
six directives that we've written but
who's counting just want to be a little
more awesome than anyone else
we don't actually I've only written
compile on maybe two or three of them
by-and-large directives don't need this
unless you're doing kind of advanced Dom
manipulation but let's do an example so
in our application we started to notice
that as we added more and more
directives our pages started to get a
little slower and what we realized was
that there's a lot of hidden features on
our page that we're still being loaded
at load time but weren't necessarily
being used until a user say clicks a
button so take for example a big
complicated form that you've got on your
page and the user clicks a button to
reveal that form and fill it out and
then hit save you don't need to pay the
penalty for loading that whole form and
processing any directives inside that
form and all the watch expressions and
everything in that form at load time
necessarily you need to take that
penalty when the user actually opens the
form and it needs to be used and if you
have ten such forms in your app and none
of them are actually being used at the
moment it would be awfully wasteful to
load all 10 eagerly at page load time
that was influencing our performance
pretty badly so we created a directive
called lazy load and the idea here is if
you've got an expensive block of Dom you
can put the HV in our case HV but in
this case my lazy load on that Dom
element a wrap a div around it and then
what what it will do is when ready to
show in this case becomes truthy it will
load that Dom in and then stop watching
and just do nothing anymore that's the
idea but until then it will prevent any
subsequent nested directives from
running and you watch expressions from
running an angular will basically stop
processing
down below this right very good for load
time so let's see how that looks so this
is going to reduce a couple of new
concepts which I'll talk about in just a
minute but it actually uses the word
transclude which is I know a little
intimidating but we'll get to that too
it has a high priority this is to make
sure that it runs before any other
directive on that element and it's
called terminal and that prevents
subsequent directives from being
processed in this case we're restricting
it to attributes because again we want
to put my lazy load as an attribute on
another element and it has a compile
function and that's all it has no link
function what we're doing in this case
is we are keeping track of whether we've
been shown yet and we're doing a watch
on the caller scope with whatever value
they passed in to here ready to show in
this case they passed ready to show when
that becomes truthy and this watch
function gets called and we haven't been
shown we're going to set has been shown
to true we're going to link in now we're
calling that linker function all of the
Dom below us with the scope from the
enclosing environment and then we're
going to unwatched and this is where the
directive backs off and says I'm not
going to be a watcher anymore I'm out my
job is done here so it's adding one
watcher to angular
until it becomes truthy and then it's
out just like that this saved us a lot
of page load time in our app doing this
kind of thing so you might say how is
this different from ng-if and the answer
is it's almost exactly the same as ng-if
except for when ng if that expression
becomes false e it actually removes the
Dom again from the browser and when it
becomes truth it puts it back in real
ynx it again and again false e comes out
this one only adds DOM and then bails
never watches again so it's really great
for high cost startup stuff so that's an
example of when you would use compile oh
and just a note the priority property
did change in angular 1 point two so if
you haven't already upgraded the scheme
there changed a little bit ok everyone's
favorite subject so by show of hands who
feels confident today that if asked upon
they could explain transclude
successfully to another developer you
know I'd say that's five to ten percent
said about right sound good um I felt
the same way you did until like three
hours ago
no just kick actually the same co-worker
that came to me and said Dave I we need
to do directives came to me and said
Dave I'd like to tell you what
transclusion is because I'm pretty sure
based on what you're saying that you
have no idea what you're talking about
thank you thank you very much and and he
explained it to me and I was like that's
too simple that can't be right I'm not
going to say that out loud
and so like six months later I said it
out loud and other people were like yeah
that's it so it took a while to build up
my confidence but I like to think of
transclusion as a picture frame imagine
if you will if I'm a manufacturer of
picture frames and I sell them to the
public but I always put my own pictures
in them right kind of a crappy picture
frame manufacturer idea but that is what
a directive would be without
transclusion you can use my directive
but I'm bringing my content you can't
put your own inside a trance cluded
directive is one that frames some HTML
and allows the caller to specify the
content of that HTML so a transclude
directive is like a picture frame so
let's see an example of that let's say
we want to create a dialogue on the page
where the dialogue has certain a header
and a footer that's common and
consistent throughout your application
but each developer that uses your dialog
directive brings their own content and
fills it in okay again a dialog that
doesn't allow you to specify the content
would be a pretty crappy dialog just
like a crappy picture frame so in this
case we've created a dialog we've
restricted it to our directive called my
dialogue we've restricted it to element
only so it's just for custom tags we've
said transclude true and we've created a
little HTML template in this case we've
done div class equals modal just to give
it a modal class with a nested div class
equals modal body and then look in green
ng transclude
that attribute is how angular finds the
content that the caller specified and
inserts it below that element as a child
of it not below it but as a child of it
okay so I want to talk through that
again cuz it's kind of weird but this
how the directive author says
picture-frame content goes here right
where I've marked ng transclude you
could have as much HTML as you want in
here and then a single ng transclude and
angular will put the caller's content in
there
so sometimes it's useful to see this in
reverse order but here's how you would
use it I've got a my dialogue directive
my own custom tag and then I bring my
own content I've got some custom titles
some custom dialog content goes here
whatever I want
this is up to the caller to bring their
own content that h1 and that P element
will be put into the ng transclude place
there as a child of that div okay so
bring your own content just like that so
in this case it expands into div class
equals modal div class equals modal body
that came from the directive then h1 and
a P tag that came from the caller so
picture-frame so just by a show of hands
how many people would feel more
comfortable now explaining what
transclusion is to their developer than
5 minutes ago okay 50 % not bad we will
have office hours afterward for the rest
of you but it don't don't hate yourself
it's a hard concept and it's it's very
abstract when I read it for the first
time I thought mich Gill made this word
up then I went to Wikipedia and saw
that's a thing then I checked the Edit
history just to make sure that it wasn't
all Google and it's not so it's legit
this is a real computer science term
there are several that do transclusion
think about it ng-repeat
what good would an NG repeat block be if
you couldn't specify your own content
for each repeated block it's trans
cluded ng-switch same thing you bring
your own content and you specify the
ng-switch cases what good would it be if
you couldn't bring your own content and
NGO same story all right so this is all
the stuff we didn't talk about that I'd
be happy to talk about some more but
directives go there's a lot more to them
there are some strange behaviors that
you might not expect when you put two
directors on the same element there are
rules about when that's allowed and when
that's not and along those same lines
directives are kind of the thing that
drives scope throughout the throughout
your angular application
throughout the hold on scope is coupled
to elements in the DOM and directives
are what make that possible
we didn't talk about what it means to do
transclude element you can talk about
that later if you want and one last
thing that I didn't talk about that I
think is really cool and I'll just take
last minute to talk about this standard
HTML attributes can be directives too so
if I've if I've got a e8 and it does not
honor the placeholder attribute on input
text boxes I'm kind of screwed right
this is why the jQuery placeholder
plug-in exists right to fill in this gap
what if I wrote a directive there was an
attribute directive that met that was
just called placeholder and all it does
is detect if it's ie8 and if it is it
calls jQuery dot placeholder on the
element just like that so imagine how
powerful it is to be able to do
behavioral extensions of your HTML to
fill in holes for older browsers and to
give your application consistent
behavior and look and feel easily and
repeatedly and without repeating
yourself so thanks very much