Using ngModel in Custom Directives

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] [cuts off]