Convert a UI Route into an Angular Directive

[00:00] In this lesson we are going to convert our edit and create states into directives so that we can use them with an ionic modal. So we'll go ionic serve just to set a starting point, and we can see in the browser, here we go. So let's hop into our bookmark-create file, and we're going to copy template-url and controller from the conflig block, and then we're going to delete the config block entirely, and replace this with a directive.

[00:30] We're going to call this directive create-modal, and then from here let's go ahead and create our directive definition object. We're going to go with isolated scope, then we will paste in the two lines that we copied from the config block, and then from here we are going to define some properties onBind to controller.

[01:07] The first thing that we're going to define is the modal property which we're going to go with binding isolated scope, the next thing that we're going to do is define the method that we want to call from this modal, and that's going to be create so we're going with expression isolated scope here. Now let's hop into the edit file and we're going to do the exact same thing. We'll copy these two lines, then we're going to delete the config block and define our edit modal.

[01:46] Then we'll define our directive definition object, we'll go with isolated scope, paste these two lines in, and then set our bind to controller. We'll go with modal, id, and then edit as expression isolated scope. Then we'll hop into our bookmarks template and we're going to take this block of code within the UIView, move it out, and delete UIView entirely. Just underneath this we're going to add our newly minted directives to the page. So create-modal and edit-modal.

[02:35] Once this is in, we will hop into our browser and you can see that we have our create form and edit form sitting in the bottom of the page ready to be integrated into an ionic modal.