AngularJS Tutorial - Part 17 - Custom Directives (Revisited) Video Lecture - IT & Software

hi everybody today's topic is building
custom directors for angularjs this is a
topic that I like to talk about because
when I started with angular
of course I found building applications
very attractive because of the data
binding and the testability but as I dug
into angular a little bit further I
found that a lot of things that I wanted
to do revolved around custom directives
or building my own directives and as I
look through the angular source data
began to realize that most of angular
all the JavaScript that is inside of a
of angularjs is about providing the
infrastructure for directives and the
directors themselves all the directors
that we use like ng plays ng form ng
model and so forth and today I really
have two different perspectives on
directives on the left hand side is the
pretty landscape on the right hand side
is the machinery so on the left hand
side of the screen that's mostly what
I'm going to focus on today which is
building custom directives to enhance
your HTML to make your markup more in
line with the user interface that you're
trying to build and the user experience
that you're trying to create so building
custom directives to form a vocabulary
for the widgets and the things that you
think about in your specific user
interface also there's time touch a
little bit on the right-hand side of the
screen which is directives are the
machinery that make angular work it's
all that equipment in the basement of a
building that no one wants to be around
because it's kind of noisy and it's
greasy but it's that machinery and
things like ng-click an engine model
that really make angular work on a day
to day basis so the left-hand side the
pretty landscape this is basically a
talk about getting away from the
primitive obsession of HTML you might
have heard of the term primitive
obsession it's a code smell that we talk
about when we're looking through code
and we see someone is using built-in
primitive types to represent important
business concepts like a monetary value
in a language like t sharp I can
certainly use a decimal type and a
string type to represent some amount and
some
t-type but using primitives like that
always comes back to be a problem and in
the end because there's a lack of
encapsulation there and HTML provides a
lot of primitives but since hTML is a
specification design for anyone to build
web pages and web applications what we
end up doing is creating lots of divs
with certain classes to adjust our
pieces to look a certain way and
scanning through a lot of HTML to find
the really important things that need to
jump out to you is difficult the
solution to this but is coming in the
future is there are there is a
specification for custom element so that
we you will be able to write custom
elements that the browser knows about
and we can plug them in and if we have
something like an accordion we don't
have to a div class equals accordion
anymore we can just say accordion as the
HTML element that's a future
specification but there's already some
libraries that are trying to make that
specification and the feel of how to
write custom elements available today
one example is polymer another example
is specs tagging but then angular can do
this to its tagline is HTML enhanced for
web apps the idea being that you can
create custom elements you can create a
better HTML almost a domain-specific
language for your application as an
example let's assume that we're using
bootstrap JFS one of the features that
bootstrap provides as a number of alert
classes so I can create a div with a
class of alert alert - warning alert -
dismissible and each of those classes
that I add to that markup influences how
that div appears the alert class applies
certain type of graphical styles provide
some specific order and padding while
alert - warning applies on certain color
and alert - dismissible allows
JavaScript to plug in so that if someone
sits on a close button the alert will go
away but it would be nice if I could
just write alert type equals warning and
get rid of
extraneous class names and if I always
want a button there so user can close
the alert that would be nice too so this
is all about creating a better HTML it's
about creating that pretty landscape so
that when I look at a page I can
instantly recognize pieces of my
application so this is what we're
actually going to build our own custom
alert and let me bring my code editor
and a browser and talk about the current
situation that we have this is the
bootstrap alert what's appearing here in
the top of the browser and then I have
an alert that I want to create a custom
angular directive so that look so that
Jeff's markup looks at me he just the
same as the previous markup currently
that's not happening and before I go
down this path I do just want to point
out one thing this behavior has already
been implemented there's a project out
there UI bootstrap that provides need of
angular wrappers for all of the
bootstrap components this means you can
use things like alert and accordion and
carousel without writing any code or
including jQuery or including bootstrap
jf so that would be something else that
I want to do currently this bootstrap
alert is dismissible but that's only
because I have jQuery and bootstrap
included I'd like to be able to get rid
of those and now let's try to implement
a custom alert so I already have an ng
app directive in this file and I should
have mentioned this at the beginning I
do assume that you've done a little bit
of angular and you understand ng app and
ng-controller but maybe just haven't
read the custom directive I have an ng
app
and I have that module directives define
now what I need to do is add a directive
being alert and provide a callback
function for angular so that it knows
about alert and what the alert
characteristics are so this callback I'm
providing is only executed one two
defines the alert in fact what I have to
return from here is an object that we
call the directive definition object the
name is significant because this name
will have to match up with what I'm
using in my HTML and more on that in
just a second inside of my directive
definition object a couple of things
that I can do include restricting this
alert to utterly appear in certain
places and that's just done with like a
single character in demonic so E is for
element a is for attribute it can also
provide a template something like this
just to test and get started with this
let me save everything and see if that
works and it does so angular detected my
directive definition object it replaced
or added my template into the Dom the
place where I had my alert mmm let's
just try a couple things here I'll make
a copy of this alert and also have an
alert that is a do not announce just
wait div with an attribute of alert so
will this work - yes that works - but
only because I said that it's legal as
an attribute so if I save this file and
we are using element angular won't
insert my own template whereas using an
attribute so commonly people will choose
elements and attributes something else
you might like is C which stands for
class now any place where that says
class equals alert will also be detected
as that directive and angular will
insert the template so now I've replaced
even like previous
div class but just had a fast or a div
element that had a class equals to alert
so class can be very useful when you're
using an existing CSS framework and you
just want to add in some functionality
functionality to Dom elements that have
a class name on them the last one is M
which is an HTML comment which nearly
nobody uses for this demo I'm just going
to stick with EI that's what we want and
of course most HTML becomes a little bit
too complicated to put into a string and
that's where I also allows you to
specify a template URL which I already
have this file created alerts out HTML
and just need to populate it with some
informations inside of a looked at HTML
let me get rid of some existing code
here so we can build about from scratch
save this file
and we're now using a template URL so
let me flip back to the slides for just
a second and talk about just a couple
things that we've seen and one is the
directive definition object that's the
EAC and M that I described typically
when I restrict to something like e or a
and then the template that I'm using I
looked at HTML instead of specifying an
inline inline template like the code
there on the screen I want to move my
HTML markup into an HTML file now one
concern that people have is when an
angular application starts up and you're
using 5 to 10 and 15 custom directives
with all these little footballs the
browser has to go off and fetch those
individual HTML fragments using an
asynchronous request and HR request and
that's true if that's something that
you're worried about the performance
aspect of that there is a quite handy
nodejs tool out there that works with
grunt the task runner for javascript
it's grunt angular templates you can
essentially point that tool at a folder
or folders full of templates it will
compile them into j/s files that you can
load into a page and those templates
will automatically be put in a cache
that angular toggles the template cache
so they're just available but from the
start you don't have to go out and make
all these little requests to to guide
the templates all right dr. visual
studio let's try first to make our alert
appear like the beach traveler and we'll
remove the second alert or right now
just so we don't get too confused the
first problem I have is that I don't
really want to display a hard-coded text
for my template I would like to give the
person who's using my directive the
ability to specify some custom templates
to go into this alert and they might
want to change this to be anything so so
I get that content that is inside of
index time each you know how do I use
that from a template
that's a process that angular calls
transclusion what I can do is set a
trained food flag or my directive
definition object to say this is going
to be doing transclusion and then inside
of a word there is a directive that I
can use ng transclude which is a fancy
way of saying take any content from
inside of the Dom element inside of this
document and just move it into the
position where I have my ng transclude
so that if I save everything here
I've now successfully allowed someone to
use my custom directive and specify any
sort of text apply one here the next
piece to look at would be trying to get
my head things out of the way so I don't
collide with keyboard is nuts there we
go the next step would be trying to get
this styled like the alert so there's an
easy way to do this and there's a hard
way to do this I'm going to start by
showing you the hard way just because it
shows you a little bit about how
directives can work at a lower level if
you need that type of flexibility so
what I'll do is provide a function and
is the link function this link function
gets some specific parameters that are
passed to it by angular it's going to
pay a scope object which we'll be
talking about quite a bit it's going to
take the element that is pointing to the
root of my template it's going to take
attribute which is an easy way to get to
any attributes that were specified on
the directive so if I say alert type
equals warning warning should be a
property on how to beat and that's all
we actually need for now so if the words
find you type that a user specified so
if they said type equals warning I
should be able to walk up to attribute
and say give me the pipe and I can
provide a default okay they didn't
specify the type let's just try an
attribute tight and then element M is
angular's wrapper around the Dom element
that represents the mark-up that you're
using from your template it implements
the jQuery Lite API which is like the
80% of the jquery api that you use most
often things like the ability to add a
class to hook up an event with hole 1
the ability to search through children
for a specific element and so what i
want to do is i'm going to assume that
you know anything that's built with a
solar collector will need the toss of a
lurk and then i just need to add in that
additional directive to color the alert
something like alert - info or alert -
danger and i could do that if I said
element let's add a class called
alert - and add in the type that we've
retrieved from attributes that will
start to color my color my alert was
just a little bit but you notice it's
still not quite the thing at the top um
the reason for that is if we come in and
inspect elements my developer tools were
on a different screen here you can see
the way angular built out this custom
directive was there was my original
markov saying a lot of tricycles warning
and then here my template gets inserted
into that alert as a child element so
one class gives on this div and one
class is on the outside on the alert
what I would like to do instead is tell
angular just to replace that Dominic and
now I have something
more bootstrapping I should also have a
close button on here so let me copy this
month out for a button into my template
and I won't need at abashed dismiss all
I really need is the button with the
active inside of it and now from inside
of my scope or inside of my linking
function something else that I can do is
I can go to element and I can ask for
children of a specific type now one
thing to keep in mind with this children
API is in jQuery if I ask for children I
can provide all sorts of selectors there
to say give me children that have the
specific class for the specific
attribute with the JQ Lite API that
angular provides by the fault you can
really only search for children by tag
titles so I'm looking for that one
button inside of my template and by the
way if you include jQuery before you
include angular dr yes you'll have the
full jquery API available but now let's
do a button on what I want to do that's
when there is a click on that close
button one thing to do is just say
elements not removed to remove that Dom
element so let's try this by save
everything and it has my alert for
active it's not quite formatted properly
but I can now click on that button to
get rid of it so there's some definite
problems with this linking function and
this actually isn't the way that I would
suggest you write this we're going to
rewrite this in just a second but it
does demonstrate some of the
capabilities that you can have inside of
a linking function you have access to
the elements the attributes you also
have access to the scope in fact one
other approach that I could take to the
office is to say
scope dot close I'm going to add a
function to my show it's something that
will do an element I learned then that
remove
and what would happen if I did something
like this well that if I save everything
should still work but here's one
indication that there might be a problem
let me take this alert and make a few
copies of it and we'll change those to a
1/2 just so we can see which one is
which save everything now I have three
words so I'm going to click on the
second alert to try to get it to close
and when I click on that second alert
the third alert disappears that would be
the first indication there's a serious
problem with the way I implemented this
and now if I keep trying to click on
these close buttons they're just not
going anywhere they'll try to fix that
but before I do arm you know you're
probably wondering what's actually
happening behind the scenes maybe I
could make it a little more obvious if I
give a added a little something extra
inside of here and let me move this
button to the top hopefully that looks a
little better now that's better and
let's have a label where a user would
have to type in a reason that this alert
appeared or why did this happen
H play so an input type equals text we
will use an energy model directive
because I can use angular directives I
can use any directives inside of my
directive template ngmodel both reason
so we'll be trying to bind that to a
reason and I'll give it a name and so
now my directive appears there's a input
where I can enter a reason and that's a
bit of a problem
I just realized if I click anywhere on
the element it's loading I'll try to
debug that later but this kind of shows
what's happening when I pre a directive
by default you scope of that directive
will be the same with the parent scope
so when I create this function on the
stove object and say still type close as
a function where we do element that
remove and
learn to closure around element well
this would happen this linking function
by the way it executes once for each
instance of the directive on the page so
the first time an excuse for directive
number one is going to close around that
element in the second time the second
element in the third time the third
element it's all the same close function
but it just turns out they that close
function the last version of it that I
add to scope is going to be one that
closes around the third element and I'll
try that third item always disappears
and we know now that the scope of shared
because
ng-model when it's pushing this value
from the input back into the scope it's
pushing it into a scope that's shared
between these two directives and it is
the same as the parents go what is the
parents do let's take a look at
index.html apparently I have these
alerts and I have an ng app and I don't
have an NG controller so the stove would
be routes though let's open up some
interesting scenarios here let's create
an NG controller call up the alerts
controller I want to have a scope there
that I can play with so over any ow they
can do and I pop controller alerts
controller that will be a function that
takes a scope object and as I've here
will be able to do a playlist of things
but let's start trying to fix this out
so things function a little more
correctly let me save everything I'm
sure we're still in a working state
which we are and come back to the slides
for just a moment we talked about
transfusion just try to make sure that I
don't lose my place here that's the
ability to move content from the view
into my template
very simple ng transclude directive to
do that we're looking at the linking
function that and the way to think about
it is we're linking the Dom to a
specific angular scope so when the
things disturb or we wire up event and
hook them up to methods that would be
called on the scope that's linking the T
together the scope in the Dom inside of
the link it's space to modify things you
can inject it just additional elements
if you need a very dynamic display but
the problem we have right now that we
want to solve jumping back into the code
it's the fact that all of these are
sharing the same through so one way to
get rid of that is inside of my
directive definition object to include a
scope property and I'll initially just
set this to a new empty object and
phasors final and now you can see that
when I type inside of here if I could
type inside of there all of a sudden the
clothes is starting to work correctly so
this is what we call an isolated scope
and angular it's a way of having each
instance of this directive get a spoon
unique Stoke object to work with that's
Phillip object unlike other scopes that
we use from controllers like the alert
controller that we have out here there's
not in here from it span this isolated
scope we'll always in hair from root
scope so it's a bit offset from the
typical prototypal inheritance chain
that I've set up for Stokes but now the
question becomes if I do need the reason
that the user is typing in how do I get
that reason into my alerts controller so
let's let's set up this scenario I'll
start this off very simple this isn't
the code that I would want to write for
production but we will modify that let's
say that alerts controller
as a reason one property and a reason to
property which is we'll just set that
one to empty and what I want to do is
when I use these custom directives those
two directives in my P it's right now I
have three but I'll cut it down to two
what I want to be able to do is what's
up reason 1 to the first directive and
recent 2 to the second directive
so in index.html after I save this file
let's get rid of one of these directives
ultimately what I want to be able to do
is say a reason equals reason 1 and have
that be an expression that effectively
attaches to that reason 1 on my scope
object in the controller and this one
will be easy to the way I can do that
the easy way to do that from app dot
Jacobs is inside of my directive
definition object there is a syntax that
you can use a shortcut syntax to
effectively say there's a property that
I want on this scope that I walk down to
an expression that will be provided when
someone is writing this directive in the
page and that's work that expression
looks something like this this is saying
that my scope on this directive will
have a reason property and I want it to
be bound in both directions with
whatever attribute is specified whatever
expression is specified by something
reason on the directive so reason inside
of the scope for this directive should
effectively by against reason 1 from the
scope of alerts controller and if I
change reason one from alert to
controller that change should be pushed
into that directive instance and if I
change that reason from the directive
instance it should be pushed back the
other way back to Tyler's controller let
me save all this
you can see that reason one appears here
as none so I have that binding and if I
come into index.html let's just have a
little expression here that will write
out reason 1 so I can see it's being
pushed from the controller into my
director scope and now I'm going to have
to fix up my clothes function but I'll
pronounced going to delete it because
we're going to replace that
functionality in a bit anyway get rid of
that so these things that close when I
click on them are now if I change this I
get pushed back in time alerts
controller also that's one type of
binding another type of binding that I
can have as I could say tight I want
that to be an attribute binding which is
very similar to what equals does because
now now I will have a property on this
scope object called type I won't have to
go to the attributes anymore and it will
be bound to the string that is specified
here if I say type equals danger and say
this I'll be able to get to the string
value danger automatically just by
looking at on my scope and looking at
tight which means I don't really need to
add a class inside of my linking
function now what I could do to make
this a little bit simpler is to come
into my template and just say class
equals alert and also alert - type and
that will be the type on my isolated
scope for this directive so that works
and I should be able to come in ticking
xwt now just to make sure this is
working and when is danger and one of
those info so
yeah I have two types on here well that
would be one reason so I want to be
beans are one to be warning that looks
better
so that string values getting pushed
into my effective automatically and then
the final thing I would want to do is
get the close button working again and
usually this is something that well in
this case this is something that the
directive might not know how to handle
what should happen when someone closes a
directive right oh man I could just
remove the Dom element the changes are
the controller my outside controller
might want to know when someone is
supposed to directive because it needs
to tape something to the server or
modify the structure so another form of
binding this was in force and and this
effectively will bind to an expression
that is in doubt in other words it's
inside of my template now when someone
clicks on this button if I just say
ng close equals close that is in a sense
staying what I want to do is invoke the
close function that was specified on the
directive so out in in depth at each now
when you create something hard coded for
just a moment I could say close equals
those reason one and this can be a
function then whoops on my controller
scope here dot copy the wrong thing I
think it was called close reason one
function um PD what I would do here is
have a flag so alert one said it's true
and this would really be close alert one
and I could say scope dot so alert one
is false let me pick up some things now
inside of the
earth or in the inattentive Chanel
clothes a look one let's see if it says
chance of working save everything and I
want to click on this to close it
oh I could stay ng only ng show this if
show over one is positive but now I
thought what we were doing is toggling
that flag shall alert one
and I'm revoking up there and everything
save oh I think I might've missed
something that well let's try something
else more interesting what should happen
let me look at the former time I'm
saying clothes should bind to the
function expression that's provided in
the attribute
I do have an NG clothes fine ng twit
event should invoke that it just now
what's happening so I can close these
all right
I can even close the first one because
that's the only place if I put the ng
show but let's come up with a more
realistic example let me go into my
controller and instead of doing all the
crazy stuff with reason one and reason -
let's just say I have a collection of
alerts to show the user so I'll have an
array and this will be an array of alert
objects every alert object will have
some sort of message like this is
dangerous it will have a type it could
be danger it will have a reason develop
this one to none and now let me just
make a couple copies of those and change
some of the text around I can have a
warning and have an info will blank this
one out just put in
the text here this is a warning this is
coming though alright so what I want to
do is happy alerts controller the alerts
controller wants to display each one of
these objects inside of an alert and
give the ability to close and when that
when the user closes a specific alert I
want to remove these alert from this
array to inside of my markup instead of
having all the crazy stuff here that's
paid a div that will ng-repeat
alert an alert and inside of here I can
have alert type equals overthought type
reason equals alert that reason that's
going to be a problem but I'll show you
our sorry
alert that reason is going to work alert
that type is going to be a problem I'll
show you why in just a second
and inside of here I actually want a
data binding against alert got message
so it works very good so I'm displaying
the reason for the three alerts that
seems to work I'm displaying the message
for each alert that seems to work the
one piece but it's not working as a
worked out type and this is where you
can see a significant difference between
the equals binding and the ampersand
binding is still binding and the
attribute binding that attributes
binding being assumed there's just going
to be a string value and attribute so it
reads it out directly in other words
when I say type ampersand what I'm
looking for is tight and then just treat
this as a string don't try to evaluate
it as an expression just take that
string and literally lifted out of the
doll and put it into that property so if
I were to do an element inspection over
to tease if there's a div inside of here
that says class equals alert space alert
doctype which is not what I want
in order for that to work I really need
to interpolate or have other type
evaluated as an expression and then put
into the attribute and I can do that
with the double curly braces and angular
so I can say that and that's now working
so I should have three different alert
rates there and hopefully that makes
some sense I know that was very
confusing for me when I started with
angular why sometimes do I have and
actually here that just says alert that
reason and sometimes I need to use two
double curlies but I need to use the
double curlies if I want to have an
expression put something into that
attribute value that is bound with an
ampersand because that's just looking
for a straight-up string value of that
attribute whereas the equals bindings
are still binding there's going to walk
up to this attribute value and assume it
is an expression that has to be
evaluated against the scope in order to
get that value so that part works and
now the last part would be what happens
when I close this well let's have a
close function that says close alerts
and I'll need to pass in the index of
the alert that was ticked on so dollar
sign index was just a magic variable
that you get when you're inside an NG
repeat it'll if there's three alerts it
will go to zero one and two so inside of
my controller I should be able to
provide still close alert you give me an
index so I edit a function or you give
me an index and what I could do is those
alerts maybe we could splice out at that
index one element let's see if this
works that works in that there's the
essential pieces of what I wanted to
explain about custom directives just the
ability to write a little bit of code
and actually most of it is just
decorative of code and don't even need
this link function anymore just a little
bit of decorative code we're now inside
of my HTML I have the ability to just
write alerts do off words of data
bindings against things like the reason
and it's a lot
clear mark up I think and has some
default behaviors and trying to specify
everything at a slightly lower level
using bootstrap like this so a little
bit of time left just to run through
some slides and review what we just did
so first of all isolated scope by
default when I create a directive it's
going to share the same scope as its
parent but an isolated scope when I just
say start pullin and provide an object
of some sort that's going to isolate
this directive scope from everything
else it will inherit from root scope but
anything you put in that scopes not
going to interfere with the controller
so but then when you have an isolated
scope you typically want to bind
properties of that scope to the outside
and environment against attributes
against things that might be in a parent
controller somewhere and that's where
you have at divine attribute values as
strings equals to bind a model value
from another scope and the ampersand
that will effectively bind a function so
if you invoke that property you'll be
invoking the function in someone else's
scope somewhere the three bindings can
form a bridge or can form a bridge
between your controller stove in your
isolated directive scope just remember
that equals is binding model values so I
want to bind something from my scope to
the isolated scope ampersand is binding
attributes it's always going to look and
I say you know please give me a scope of
the type ampersand it's always going to
look at that type attribute on the
directive and take that literal string
as a value and put it into my scope so
that's quite commonly used when you just
expect people to they you want the
properties on your scope to represent
that patch of each value is typically
not something that someone will want
battles against their controllers field
they're just going to specify something
as a string and then there's
ampersands applying to a function so if
i specify on my still object that i want
a close down technique for CM it will
look for an attribute of the same name
on my directive close and invoke that
expression for me so just a little bit
of plumbing in the time that we have lab
I just wanted to make you aware of some
other capabilities custom directives
first of all you can create a control
for your directive so I could register a
controller like the alert controller and
it could take responsibility for
handling certain events if there's a lot
of complicated logic or processing that
happens that needs to happen I'll give
you an example of this in just just a
minute from angular source there because
quite often one reason that you want to
write a controller is that you want to
communicate with other controllers may
be angular controllers or your own
controllers and this happens quite often
when you're inside a forum so if you
think about how a forum works typically
the different inputs that you have
inside of a forum with the ng model
directives and the form tag itself they
don't have to be orchestrated together
to understand when things are valid when
things are invalid what the model values
are how you push values back and forth
what you see on the screen is a little
directive from the angular documentation
that I've tweaked a little bit that
allows me to put the attribute content
editable on an HTML element and then I
can use ng model to bind against that
content edible Dom owner it can push
whatever the user typed into that Dom
element into my scope and in order to do
that I have to work a little bit with
the ng model controller itself let me
actually show you something from the
angular source code which i think is
interesting that like demonstrate this
will of a better let me do a search for
ng model directive and if we find this
function here this is the directive
definition object for ng model so when I
say ng model equals reason this is the
directive definition object that angular
uses to determine how that's going to
behave a couple different things inside
of here that we haven't seen before
first notice the require require as a
way to tell angular the
particular directive requires other
controllers to be in place the ng-model
directive requires the ngmodel
controller that's not going to be a
problem is also optionally because of
this character requires a form
controller that is a parent that's what
that character signify so I might
optionally have a form controller that I
want to interact with this array will
represent the parameters that you get as
the fourth parameter to your link
function so if I ask for an NG model
controller and optionally a form
controller those will be array sub-zero
and array sub one on this controls
variable so model controller Sub Zero
form controller is sub one but it's
optional so you can see there's a
default here some normal form controller
so inside of a directive once you have a
reference to another controller you can
walk up to that controller and interact
with it so one of the things in ng model
directors will do is walk up to the form
controller this is parent as a container
and effectively register itself and say
hey there's a little bit of data binding
going on down here so when you're
checking to make sure things are valid
or if someone tells you to set
everything into a pristine state make
sure you tell me about that because on
one of the controls of this inside of
this form and I need to provide feedback
and user feedback and add the right
classes for when things are pristine and
when things are valid and invalid and so
forth the ng model controller to take a
quick look at that go to the definition
effectively from our controller if you
can expose an API by adding attributes
to the controller itself so by saying
this stop parsers and this top four
matters other controllers that need the
ng model controller can inspect the
parsers and inspect for matters and
inspect if something is dirty or valid
or shut those properties and these are
based
the API suppose these two controllers
provide energy form controller and
ngmodel controller you know this energy
form controller you can add controls you
can set validity you can set something
you can set the entire form into a
pristine state that will have the
different CSS classes so it might render
a bit differently ngmodel controller has
an API to allow you to do things like
edit devalue or separate Lily
this model is crowing invalid so I'm
going to set the validity so that the
proper CSS classes appear to let the
user know that this is invalid finally
there is a compile function that is
inside of the directive and there's also
a lot of questions about compel versus
linked and here's the big difference so
compile function will execute once if
I'm using a directive let's so well
the compile function will execute once
for every time the directive appears in
my markup in other words when I have an
alert here that it's inside of a div the
compile will execute once for this alert
and inside of a compile function you'll
notice I still have access to things
like stove and element and attributes
sorry I have element I don't have access
to scope yet I have access to element in
attributes this is a place where I could
do some sound manipulation if I want to
do against the element I can do it once
in the compile function and then for
each instance of this directive the link
function will execute and that's where
you can include the stove and start
setting up buying anything into the
stove so the idea is that when you're
inside of an NG repeat if you have a
directive that has to do a lot of
dominant manipulation if you can do that
by manipulation in compile before you
receive a scope but not effectively
forms a template element that is then
stamped out for each link function and
the link function runs against each
instance so in this scenario if I had
three alerts I would have compile
execute once and I'll have link execute
three times once for each actual
instance of the director
and I think we're just about at time for
questions so I'm going to slowly flip
through these slides and you can
remember some of the text on here some
things that you might want to do like
you can do a skip that watch from a
directive quite often useful if you want
to be able to UM be able to know when
something changes in the exact moment at
this point I'll try to go through some
of the questions I think we only have
about 13 um so the restrict constraint
so I has asked about the restrict
constrain the restrict constraint is
effectively telling angular where it can
look for something called where should
it look for something named alert and
treat it as a directive so if I say a a
is short for attribute of telling
angular only look for this directive
when it appears as an attribute on an
element and in that case I lose all of
my alerts here because I'm using this
directive as an element so a is short
for attribute B is short for element C
is short for class if someone has class
equals alert that would do that
Oh what am i using to show HTML without
refreshing the browser um I'm actually
using grunt which is a new tool there
are some people at ease inside of Visual
Studio that set up a link between the
browser and Visual Studio so that when
you save a file it will automatically
refresh the browser but it doesn't work
under all conditions and so in this
project I just have a very simple grunt
file that uses something called grunt
contribs under node and basically it's
watching the filesystem for changes to
js5 HTML files and when that happens it
will tell chrome to reload because I
have a little live reloaded
installing the chrome that knows how to
listen to the live reload endpoint that
setup by cross country watch so if you
go to the chrome store into a search for
live reload you can download that
extension and it's also available for
other browsers um so I ask how well
angular support ie8 and the problem
there is that as of angular 1.3 I
believe they're not testing ie8 support
any longer so it might work in IE 8 but
there also might be some problems and if
you go to the angular documentation if
even if you're using a meter 1.2 you
want to be aware of some situations
where you might have to take extra care
for example custom elements like this in
some versions of Internet Explorer I
know have some problems you need to take
a couple of additional steps and I
believe do a document that create
element before you ever use this
directives if you want it to work
properly in Internet Explorer so one
asked a question about controller as
functionality so if someone doesn't want
to use to want to you to control
harassed impact that's actually just not
a syntax that I use that often but the
the directive itself wouldn't change you
can set up a controller directive and
have it contain the properties that you
want but um to be honest I haven't tried
controller as or the costume directive
so I'm not sure I can answer that
question Brian let's notice you can use
in a same approach which I don't
remember what approach we were at
topology is function it is not part of
the stove I mean you could always I
think that might be a question like this
if I do have a link function it takes a
scope and an element and attributes and
so forth is there a way for me to let's
say hook up something to an element so
that when it calls click I don't have to
have an anonymous
inside of here and the interiors yeah
certainly I mean you could have helper
functions defined inside of this
anonymous function that define feeler so
I could have some sort of private helper
function here maybe I need to pass it
some parameters but I could always say
you know helper and get that function in
both if you don't like the anonymous
function trying to scan position
questions here to answer elements
created with the alert director for how
they're understood that's only true when
you do this isolated context so without
that every alert would have the same
scope as ad opinion no matter how many
times it appears on the page but as soon
as you add a scope definition inside of
the directive definition object and
every single instance of that director
will have its own isolated scope
a good question is there a reason why we
would not always want to use restrict e
for a directive like alert and let's
let's see yeah so you might want to
restrict that to be le users an element
it really all depends on you know how
flexible you want the director to be and
what you want to allow developers to do
so if I'm direct developing a custom
director for a team I probably have a
very specific idea about how I want them
to use that director board I have some
ideas about what we want our markup to
look at look like for that project
so I might say let's enforce this to be
an element all the time but if I'm
writing something that might be shared
amongst other projects towards an
open-source project or I don't know what
people might want to do with it I would
consider at least adding EA and C just
in case people want all those options
because or at least EA some people don't
like to see custom HTML elements they
might always want to use an attribute to
create a directive in the market oh how
the angular's directives compare to
ember components I'm not sure that we've
done a little bit with ember and I found
on any performance comparison
what is it better to use a compile pre
link post link controller um definitely
you want to use the compile function if
you have the ability in size now to make
modifications to the Dom element before
it gets stamped out for each directive
instance it's a little bit of a
performance benefit so if you have a
situation like this where you're using
alert inside of an NG repeat if I have
to go in and manipulate the element
before it starts getting repeated upon
the compile function would be a good
place to do that pre linking and post
linking those are functions to get
returned from the compile function
basically you'll want to start using
those if you have a directive where you
need to initialize things or set up an
environment as a
arrrg of directives is being initialized
because pre linking allows you to access
some code when your parents are set up
with your children are not set up as you
have in post linking allows you to
execute some code after your children
have been set up
hopefully that's some insight into
attitude I've always looked at the
angular source code for some of these
examples and ng-model directive and ng
form directive are some good examples
that go into compile and pre linking and
post flanking some wants to know that if
we use an isolated scope constantly
still inherit some properties from the
parent scope and there really will be no
inheritance relationship if you set up
an isolated scope the only way to get
things from a some other scope like the
controller scope into this code is to
use some sort of binding like this
that's the most effective and easy way
um you know if you wanted to do it
imperative Li you could always have a
link function that um goes out and looks
for things and set up watches and so
forth but the decorative approach is
pretty easy and you can still get any
values that you need inside of the scope
with this approach do you think
directives
non-performance if there is some
performance impact but in the angular
applications I've worked on it's really
the data binding expressions and the
amount of data that has to get pushed on
the spins it has more of a performance
hit at least for the types of
applications that I've been building so
you know building a custom directives
that appears a thousand times on a page
it's probably going to be a little bit
slow not because there's a thousand
instances about directive but because
there can be a thousand Watchers set up
for deeded binding expressions that are
inside of the cow blip something like
that looks like a couple questions on
nested directive I actually did have an
example well I guess it's not
necessarily nested directives but
something we didn't get into you today I
think I understand the question yes
would be an example where I might have
an alert directive and there's some
relationship between this alert
directive and an alert header directive
it expects to be inside of an alert
director and quite often when you have a
relationship but if you one things like
the alert header might have to
communicate with the alert controller or
vice versa that's those types of
situations where you might want to
require some other directive to be in
place so here with the alert header what
I'm saying is the only way for alert
header to work is that there has to be
an alert directive as a parent and of
course the alert directive itself that
that array allows me to get access to
those two controllers and then when
someone clicks on something I can left a
parent controller now tell it to do
something interesting
questions about translating regulars for
how am i using ng transclude just to
review that real quick if I find the
right place I can say that my directive
is going to do some transclusion and
when I do that so the whole idea of
trance illusion is I want the ability to
take some content that someone is
placing inside of my director like
there's alert but message binding I want
to do it ability to take that and lift
it out of this area of the markup and
actually get it into my template and I
can do that and include some files here
but ng transclude and so this is where I
would want that content to appear I
could cut that out and put it down here
you know to position that change pleated
content in two different places but
where this is dangerous coming from it's
coming from content that's inside of
that directive and if you need something
more flexible there actually is an
option with the linking function the
linking function will take the scope the
element that attributes the controllers
and then a fifth parameter you can
actually ask orders of change solution
function which you if you invoke it will
give you back information about what's
inside the directive and you can piece
things together in a more manual process
I think just a couple more questions
what is the m4 and district' m/s for
HTML comment and to be honest I've never
used this I think that flexibility is
there just for some extreme
circumstances perhaps and I think I even
read where it's going to be deprecated
or not available in the future so n will
be looking for something in the HTML
like alert and work directive it inside
of an HTML comment well there's more
questions that I can answer and I notice
for this one o'clock um keep a record of
all these questions and if you do have a
burning question or notice something
that any more information about feel
free to email me I do
reply to all emails it might take a
while there's a lot of
questions but problems to get through
them otherwise thanks everyone for
showing up