Become a member
to unlock all features

Level Up!

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


    Using ngModel in Custom Directives


    You can use ngModel in your own directives, but there are a few things you'll need to do to get it working properly.



    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




    Man 1: You can use ngModel in your own custom directives. It just requires a bit of knowledge about requiring other directives, controllers, and using their APIs.

    So what this looks like is we're going to require ngModel because this is a directive. Ngmodel is the directive that sits along side our bank directive.

    Then, when we build our link function, we want to make sure to include that fourth parameter meaning that this is the controller that ngModel gives us to interact with.

    I'm going to name this, "ngModel," just to make it more clear. So what I'm going to do here, I'm going to say, "element on click," and then when I click, I'm going to say, "ngModel set view value to ngModel.view value plus 10."

    So it's going to add 10 every time I click on it. Then, when that's done, I'll just say, "scope, apply."

    So, you can see when I refresh over here and any time I can click on this, this is going to go up $10 each time because I'm adding $10 to the current view value using set view value.

    So basically what this means is that the ngModel controller, which is this controller, has a few methods on it such as set view value. Has some properties such as view value and then once we make those changes, we need to apply ourselves so that we tell it explicitly what we're done with our changes and how and when that should update the scope.