ngModelController render function

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 5 years ago

When implementing ng-model on your reusable AngularJS directives, you need to implement the 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.

egghead
egghead
~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today