When implementing ng-model on your reusable AngularJS directives, you need to implement the `render` function.

https://app.egghead.io/api/v1/lessons/angularjs-ngmodelcontroller-render-function/subtitles

ngModelController render function

Man 1: [00:00] the render function on the NG Model Controller is left for you to implement. If I start over here and I say, "NGModel.render," I give this a function. I'm going to create this myself and say, "Element text equals hello." You can see that when I refresh, it's going to change the text of our element.

[00:22] If I want to use the view value here, I would say something like, "You now have..." Then say, "Plus NGModel.viewvalue." Once I refresh, you can see it says, "10." I could say, "100, 1,000."

[00:37] Again, the reason that this is working is because on my input here, I have an NG Model of amount. Behind the scenes, NG Model is watching for the model value to change. Once the model value changes, it's going to call render on any of the NG Model controllers.

[00:53] Now, if I want to implement a dollar sign to put in front of this as a format for it, I can say, "NG Model formatters push." Then I can take the model value and return the model value as dollar sign plus model value. You can see when I refresh, I have $10, $100, $1,000.

[01:15] You'll notice I didn't have to change anything with the view value. This formatting phase is running before it gets pushed into the view value.

[01:22] Or if you want to use a filter or formatter that's already there, I can say, "Grab the filter provider." Then I'm going to push the filter currency function in. When I refresh, I have $10 with the dot and the zero, zero and the dollar sign in front. Then $100, $1,000.

[01:42] Again, this render method is being called because the amount is changing on the model and it's watching for that change. I'll trigger this render every time. This view value is being formatted because I added a formatter to my NG Model Controller.

[01:58] I'm using the currency built-in formatter to format my data and return it as a currency-formatted value. 


ngModelController render function

Share this video with your friends