Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Convert a UI Route into an Angular Directive


    In this lesson, we are going to turn two forms into Angular directives in preparation for turning them into Ionic modals. This isn’t a complicated step, but it puts us in a better place for creating the modals.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    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.

    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.

    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.

    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.

    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.