Let's go ahead and copy and paste that right here.
And that's really all we need and we'll go ahead and return,
not to forget the return rddo.
Okay, so now that we've registered our our directive and
we defined the factory function that returns rddo.
And every time of this particular tag or
this particular element is going to be in our html it's going to output
this to the html for us because that's the template of this directive.
Okay, so what's left is to go to indirect html and wipe this out and
instead write list-item-description and
notice that the list item description is using dashes in between because
I need to leave it in a none normalized notation so Angular JS can then take that
normalize ir and match it with the list Item description directive declaration.
So that's one and we use the same thing in the second one, so
we'll wipe that again and we'll paste that, we'll save it.
Let's go back to our browser and let's try it out.
We'll just put bunch of nonsense in here, just to test it out.
You can see as we keep doing this, it's working.
This one is going to be a little bit separate, but
as you can see this one only has limit to three but
our item description meaning this piece right here is working very well.
Let's go ahead and take a look at to what this looks like in the dam.
What is the dam look like for this particular element,
let's expand this out a little bit.
And let's take a look.
You can see that Angular left a list item description right in place, and
actually placed our value right in the body of that particular custom tag.
But let's go back for a second to the code and
take a look at our template that we defined for that particular tag.
You can see that the template is using interpolation and
it's using item.quantity and item.name.
Where is Angular getting this item.quantity, item.name?
When we were inside our controller,
item referred to the item that was part of the ng repeat and
that was pulled out of the local controller scope.
So how is it that we are able to access this item inside our directive and
the answer is unless you specify otherwise.
This scope of your directive will be the same scope of the containing controller.
So if we go to our index.html, you can see that this list
item description directive is sitting inside of our ShoppingListController1.
So the scope that is available to the body of this controller is the exact
same scope.
That is available inside of our list item description directive.
That is how we're able to, if we go back to ab.gs,
that's how we're able to say item.quantity and item.name.
Because ultimately,
all these properties are part of the scope that this particular directive lives in.
Let's go back to index dash HTML and see if we can find other opportunities
to create a template expanding directive for us.
Well, one of them is right here.
We see this li item.
This li item repeats again in the shopping list number two.
Well, what if we make this li item as a list item for our shopping,
in other words, the shopping list item.
Well let's go back to our app .js.
Let's create another directive.
And this time were going to call it a directive.
We're going to call it, again starting with the lowercase, listItem.
So not description but the whole list item.
And we'll specify its factory function list, Item.
Okay, so all we need to do now is actually define it.
Lets go head and say function, list item.
We don't need to inject anything into it, so we're good here,
and we'll create our ddo object.
The directive definition object, let's put a semi colon here.
And again, we'll say template.
Except that,
let's take a look as to what would we actually have to place into this template?
Let's take a look at the index HTML.
So we were really going to expect it to place this whole string into our template.
That's kind of difficult.
Not only is it kind of a large string, but also noticed it's got quotation marks
here which means we're going to have to escape those quotation marks, or
make sure we don't use the same ones so they don't conflict.
So instead of a template, we're going to use something else called a templateURL,
and a templateURL allows you to point to a HTML template, or
HTML file, and place your entire template into that file.
Much more convenient for
things that are a little bit longer than just a line of HTML code.
Let's call it listItem.html and let's go ahead and not forget to return the ddo,
let's save that and let's go head and create this file called listItem.html.
Let's open up the file browser We'll go ahead and create a new file and
we'll call it listItem.html.
There it is.
Let's go to index.html.
Let's actually close the file browser for a second.
We'll go to index.html.
We'll grab this whole string here.
We'll actually cut it at this point and
we'll go back to listItem paste that there and here we are, let's save that.
And let's go back to index.html and
now what we need to place here is we need to place our list items.
So we'll say list/item, the de-normalized name.
And there's our list item right here.
And every time this appears in our HTML, it's going to get substituted or
at least is going to implemented as this li item.
Let's go back to index.html and actually replace that over here as well and
say a list-item, and we'll save that.
And one more thing.
While it could be okay to leave this ng-repeat right on the inside
of the directive template, it's much easier I think to actually pull it out so
we could see a little bit better as to what's going on.
Let's go ahead and cut that out of here, save this, and go through our
Index.hmtl and actually place this ng-repeat straight on this list-item.
And I will do the same thing for the first one, and we'll go ahead and
save that, and I believe now we're all ready to go.
So, if we go back to our browser, let's make this smaller again,
and if we start, we'll just enter some garbage for now and
you can see nothing's working, why isn't it working?
Let's take a look as to what we messed up.
List is not defined.
So if we go back to our code, let's take a look at abda JS.