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

    ngModelController render function

    John LindquistJohn Lindquist

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

    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 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.

    Discuss

    Discuss