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

Already subscribed? Sign In

Autoplay

    Using ngModel in Custom Directives

    John LindquistJohn Lindquist

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

    angularjsAngularJS
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    Man 1: 00:00 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.

    00:09 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.

    00:22 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.

    00:33 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."

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

    01:06 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.

    01:20 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.

    01:42

    Discuss

    Discuss