Actually, if we save that for now, go back to the browser and
we'll just search for angulajs jqlite.
It should take us to the angular.element documentation.
Let's take a look at that.
And you'll see here if you scroll down a little bit,
you'll see that Angular jqLite provides the following jQuery methods.
And you can see a whole bunch of methods here.
Not that many, but a nice amount, and one of them is a find function.
If you take a look here, there'll be a find function right here and
it says limited to lookups by tag name.
So we can't just use find and
use regular selector API, we're limited to only looking things up by tag name.
If we were to use jQuery, we would not be limited to that.
But, for now, let's just use tag names to look things up.
Let's go back to our code editor and
let's create a var warningElem, a warning element.
And we'll say element.find and we'll say we want to find the div.
Now what is going on here, why am I saying find this div?
If we go back to the shoppingList.html you'll see that this is
the only div in this shoppingList.html template.
And here's point number one about element.find.
When you're using the element.find,
it is only going to look starting at that element in the DOM and below.
Which means, it's only going to look right here.
This is actually great news, because if you have a huge HTML page,
it's not going to have to look through the entire gamut, it's only going to have to
try to find that div in this small, little snippet of HTML.
So this is a very performant way of actually looking up
elements inside of your HTML templates.
And at this point, once we have this warning element,
all we really need to do is call its css class.
And if you take a look at our list of classes, this is one of them,
you can have a css class.
By the way, if you click on that,
it will take you straight to jQuery API documentation.
And you'll see you can provide the property name and
the value as part of its meta signature.
So, let's go back to the code editor and let say css and we need to say display.
And this time we want to show it, so we'll say block.
We'll go ahead and end it with a semi-colon.
Okay, so for the removeCookie, since things are going to evaluate to false at
some point, again we're going to say using Angular jqLite.
And what we want to do is, again,
we want to find that same element as we did before.
We'll just copy and past it right here.
And we'll actually copy and paste this as well.
And instead of block, we need to turn it back to none.
Not done, none.
We'll save that.
Let's go back to our browser.
Let's go to the actual application.
We don't need this anymore.
So let's go ahead and say chips.
We'll do 5 bags of chips.
We'll add that, you see there is no message.
But the second we say cookies, 5 bags of cookies, THE HORROR!
COOKIES DETECTED!
And if we remove the chips for example, let's just remove the cookies right away.
If we remove the cookies, you'll see that the cookie warning disappears.
Okay, so that was fun.
But, let's go ahead and try to use jQuery instead.
Before we do, let's go ahead and
log what is this warning element look like on the console.
Let's go ahead back to the console and let's go ahead and
add something that will trigger it, cookie, 3 bags, whatever.