Re: [angular.js] Re: ngModelController Questions

[Peter Bacon Darwin]

This is how I understand it...

• The $modelValue is the external API of the value of the ModelController. The bit that is exposed to the user of the directive - i.e. in controllers.  The user can get and set the model values accordingly, usually by binding to the ng:model directive.
• The $viewValue is the internal API that is exposed to the directives. A directive that displays the widget works with the $viewValue.
• Whenever the widget needs to be shown or the $viewValue has been updated the $render method is called.  By default this is a no-op function and directive developers should override it with their own logic.  In the case of the ui-date directive, it calls element.datepicker("setDate", controller.$viewValue) which updates the jQuery date picker widget with the new value.  (Note to self: I just realised that since the default is a no-op then I don't need to call the original $render.)
• If the widget changes its value (say by a user interaction) then the directive needs to call $setViewValue with the new value.  This commonly has to be wrapped in $apply since the update is likely to have come from outside Angular.
• The $parsers and $formatters are a transformation pipeline that converts the $viewValue to the $viewModel and back again.  Each is an array of functions that take a value and return a value.
• Whenever the $modelValue changes, all the $formatters are called to transform the $modeValue into the $viewValue.
• Whenever the $viewValue changes, all the $parsers are called to transform the $viewValue into the $modelValue.
• Any directive on an element can hook into this pipeline and affect the transformation between the $viewValue and the $modelValue.  They can also set the validity of the value in the FormController at this stage too.  This is how things like the required directive work.

Have a look at the ui-date directive as an example: https://github.com/petebacondarwin/angular-ui/blob/master/modules/directives/date/src/date.coffee

I hope that is correct and helps.

Cheers,

Pete

On 17 July 2012 07:26, ProLoser <dean...@gmail.com> wrote:

Does anyone have examples of using perhaps $parsers and $formatters to maintain 2 parallel values when changes are made, both programmatically in Angular and by events outside of angular?

On Monday, July 16, 2012 7:08:10 PM UTC-7, ProLoser wrote:

Why use ngModelController.$render instead of scope.$watch(iAttrs.ngModel)?

Is there a difference or significant reason for using one over the other?

How do I set / manage the model value? Lets say my model should be a rich object, but the view (<input>) should just have a string, my plugin already updates the text of view (<input>) but I don't know the best way to go about updating the model value. It doesn't make sense to watch the viewValue for change, because then I'd just be watching the model.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/A85fkR1K-coJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Peter Bacon Darwin]

There is a little further info here:  http://docs.angularjs.org/guide/forms - take a look at the section near the bottom called "Implementing custom form control (using ngModel)"

Pete

On 17 July 2012 19:15, ProLoser <dean...@gmail.com> wrote:

Cheers, didn't know the API was uniformly value passed and value returned (since it is in no way outlined in the docs). It also doesn't mention that the stack is an array that I need to push a function onto. Or at least I couldn't find those specific points when reading the API

On Monday, July 16, 2012 7:08:10 PM UTC-7, ProLoser wrote:

Why use ngModelController.$render instead of scope.$watch(iAttrs.ngModel)?

Is there a difference or significant reason for using one over the other?

How do I set / manage the model value? Lets say my model should be a rich object, but the view (<input>) should just have a string, my plugin already updates the text of view (<input>) but I don't know the best way to go about updating the model value. It doesn't make sense to watch the viewValue for change, because then I'd just be watching the model.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/U-J-u4OYV1IJ.

[zorro]

Thanks for this post. however I dont get why is this info not in the official angular doc. ng-model was just another afternoon f... up.

Observation to the point: Even if I call $setViewValue() in $apply() the $render is not called. I have to cal it manually.

[Peter Bacon Darwin]

$render is only called when there is a programmatic change to $modelValue which needs to be rendered.  Changing $viewValue doesn't trigger $render - it is assumed that if you are changing the viewValue yourself then you know whether you need to re-render the widget.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.