[MUSIC] Okay, so we're back in our code editor and I'm located in Lecture31 folder, which is located in fullstack-course5/examples folder. And this is again our shopping list directive app that we've looked at before. In the previous versions, if cookies were detected as part of the shopping list, we displayed an error message underneath the shopping list. What we used to display that message was ngIf. So if one of the shopping list items included cookies in it, ngIf would detect that being true and then would display that particular div with a warning. In this version, we're going to do something similar except we're going to use DOM manipulation to achieve that. And then, we'll upgrade it to jQuery and use some animation effects on that as well. So the first thing you need to do is declare my link function where I'm going to be able to call these DOM manipulation methods. So I'll put a comma here, and I'll say link, and I'll say the name of the link function, which will be something like ShoppingListDirectiveLink. Let's save that and let's go right here and actually define this ShoppingListDirectiveLink. I actually have some of the code pre-made a little bit, so I'll go ahead and copy and paste it here to save some time for us. And here's our ShoppingListDirectiveLink which has a scope, an element, attributes, and a controller. And again, I'm omitting one parameter here at the very end that we're not looking at right now. Okay, so far we have our ShoppingListDirectiveLink and we're logging to the console, the scope, the controller, and the element. Okay, so let's go to the browser and let's go ahead and open up the console and see what it's telling us. Okay, so the link scope is, and we can open it up and then we could see that the link scope is exactly the same thing as what we injected into our ShoppingListDirectiveController. In fact, you can see that the list here is that ShoppingListDirectiveController. If we open it up, we'll see all of our cookiesIntList, items, myTitle, onRemove, and so on. Okay, so that's the link scope. The controller instance, you can see again, the ShoppingListDirectiveController, as we thought it was. And the element is, if we take a look here closely, is the shopping-list. So the shopping-list is the parent element that this element parameter represents. Let's go ahead and minimize that and let's go back to the code editor. So what we want to do here is actually set up a watch on our ShoppingListDirectiveControllers function. And we have a controller function for the ShoppingListDirective, which is called cookiesInList. So we really want to have this as the property that we are watching. So let's go ahead and copy that, and let's set up a watch here, we'll say scope.$watch, and we'll give it the property name, which in this case is our list.cookiesInList. Well, since this is a function, we need to indicate that as such, so that 's the property where we're watching on our scope. And then we'll going to give it a function that is going to take a new value and an old value as its parameters. Let's put a semicolon right here and we're going to actually log the old value. And this is a Boolean function that's going to say either false or true. And we could go ahead and do it again. Say new value. Okay, so now we're watching our list.cookiesInList. So if cookiesInList changes its value either from false to true or from true to false, this function right here will fire. So what we'll want to do here is we'll want to actually display a warning, a cookie warning. So we're going to say if newValue is equal to true then what we want to do is we want to displayCookieWarning. And we're going to write that function in a minute. else, we want to remove the cookie warning since it became false it means that the cookies have disappeared, we maybe removed them from the list. removeCookieWarning, okay. So those are the two functions that we need. Now all we need to do is define the function displayCookieWarning. And we need to define the function called removeCookieWarning. Okay, so now we've defined these two functions, let's take a look at our template. And in our template here, we want to set up a placeholder for our error message. So we'll create a regular div and will give it a class error as before and we'll give it the message. THE HORROR! COOKIES DETECTED! Okay, that sounds like a good message. Another thing is, is we need to make sure that at the beginning this div right here is invisible, because we'd certainly don't want this message to show up to start with. If we go to our styles.css, we see the error class, and this is exactly what we declared our div with. So what we could do is simply add one more property called display, and we'll give it a none. So at the beginning, it's not going to display that div to the user, so it will be just an empty space. Let's go ahead and save that, and let's go back to our browser just to make sure. We could say cookie, 3 bags and nothing really should happen so far, right, because we did not activate showing this cookie warning at the bottom. Okay, so let's go back to the code editor, let's go to our app.js and let's write this displayCookieWarning. Okay, so first of all, we need access to our element object here, and I already realized that I made a minor mistake. If you take a look as to where these curly braces end, I actually defined my cookie warning, displayCookieWarning and removeCookieWarning, outside of my link function. I don't want to do that. I want to go ahead and grab these, cut them out, and put them right back inside so I'll have access to the element that I'm going to be using in order to manipulate the DOM. So let's go to the displayCookieWarning now that we're now inside of our ShoppingListDirective function. And the first thing we're going to do is we're going to try to use just regular using Angular jqLite. 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. And let's open up the console, and let's take a look at what we have here. We have this U, and let's take a look at its proto, it's prototype. And you can see its prototype, look at all those methods that we spoke about and we saw in the documentation. So you see the find here, you see the css we used. So a whole bunch of methods, pretty good. Let's go ahead and go back to the code editor. Go to our index.html. I already pre-downloaded the jquery-3.1.0.min.js. And I have it here just commented out. Let's go ahead and uncomment that. So now what we have is we have jQuery mentioned before our angular.min.js. If we save that and go back to our browser, we've done nothing else just mention jQuery before we imported the actual angular.js. Let's just refresh, just in case. And let's go ahead and say cookie, 3 bags, let's add that. And let's take a look as to what we have now. Let's open that up. And let's go look at its proto again, what is its prototype? Let's see, can we scroll it up a little bit more? Look at that, do you see how many more methods all of a sudden showed up on that same element? We have a whole bunch of methods. And some of them, look at that, say fadeIn, fadeOut. And I'm pretty sure there's a slideDown and slideUp, which I can't see them at the moment, but I know they are there because they're part of jQuery. And all the way down probably, right? By S, slide, slideDown and slideUp, there they are. So let's go back to the code editor. And now that we have jQuery installed, let's go to app.js and use jQuery to do that. We'll actually just leave this alone. Maybe we'll just comment that out and comment this out as well. And let's use jQuery to get the same thing done. So let's say if jQuery included before Angular. Okay, first of all, the warningElem, as we had it before, can now be found by a much more precise selector because the find of jQuery supports much more than just looking for tags. So we could say div, we could say div.error. So I want to find a div with a class called error, which is exactly what our div is. And now, instead of simply showing a displayed block what we're going to do is we're going to say warningElement.slideDown. I want a slideDown effect, and I want 900 milliseconds. I want it to take 900 milliseconds to slide down, okay? That's all we're going to do to display the cookie warning. And to display or remove the cookie warning, we do something similar. Again, we're going to find that same div.error, except we're going to say slideUp to remove it from the view. Let's go ahead and save that. Let's go back to our browser. We could close that and we could say chips. 2 bags or 3 bags of chips and nothing's going on. And then we can say cookies. Let's say 5 bags of cookies, why not? And when we do that, you see THE HORROR! COOKIES DETECTED! Kind of slid down and gave us that effect. Now if we remove the cookies, take a look what's going to happen to this horror, cookies detected. It's going to slide back up. Remove, bam, its gone. So now we are able to manipulate the DOM and actually affect it and even use third-party libraries like jQuery, and obviously any other library we want, directly in the DOM and it's all compartmentalized inside of our directive. So the code is not spread all over the place. It's very nicely segmented only to the part that deals directly with DOM manipulation. Okay, so let's summarize. DOM manipulation is usually done inside of the link function. You declare the link function directly on the DDO, the Directive Definition Object. The link function does not support injection itself, but if you wanted to use injected components, services or other controllers you can inject them directly into the directive declaration. The scope parameter, that is of the first parameter of the link function, is the exact $scope in the directive's controller. It doesn't have the dollar sign to remind us that it is not injected, it is simply passed into the link function. The second parameter is the element object and that represents the element of the directive. It actually represents the top level element of the directive. That object is either the jqLite object, which is a watered down version of jQuery that Angular provides out of the box. Or, it is the jQuery object itself, if jQuery is included before the angular.js is included in your main HTML page.
