how do I update a ng-model value from an input manually?

[Jakub Arnold]

Basically the issue is following, I have an input which has a value set in a way that it doesn't trigger angular's data binding (for example browser autocomplete), say it looks like this

<input type="text" ng-model="username">

but the only reason when I care about the value is when a form is submitted, so I could somehow force the model value to be read from the element.

I don't really want to do something like $scope.username = $("#username").val() ... is there a better way?

[Nick R]

Why doesn't browser autocomplete trigger data binding?

If you have events that fire outside of angular, just wrap them in a call to $scope.$apply.

Just data bind the input to something, and then make an ng-submit handler on the form that copies the value somewhere else.  Like so:

<script>

window.controller = function($scope) {

  $scope.submit = function(){

    $scope.submitted_username = $scope.username;

  }

}

</script>

<form ng-controller="controller" ng-submit="submit()">

<input ng-model="username">

</form>

[Jakub Arnold]

This doesn't address the issue. I can't control the outside event, so I can't wrap it. I need to force update the binding.

[Witold Szczerba]

Hi,
there is no clean solution as these are the browsers' responsibility
to notify about changes.
I think, in order to avoid stuff like you said like:
$scope.username = $(..selector..).val()
you could try a writing a directive similar to ng-model, but triggered
manually - e.g. by broadcasting a message.
Now, there are two options:
(#1) when submitting a form, from within controller, you would
broadcast a "event:submit" message, or
(#2) you would create extra submit directive, so it would be
responsible for making a special notofication.

Option #2 is "cleaner" because controller is not involved into
problems caused by browsers, but #1 is easier to implement, because
there is no need to make extra submit directive.

Just now I have figured out that the #2 option could be incorporated
into core angular, so ng-bind could have some extra switch to
synchronize on extra message event and submit actions could also be
set up for extra message broadcasting. AngularJS users would use it in
special cases when browsers do broken autocomplete...

What do you think?

Regards,
Witold Szczerba

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

[Jakub Arnold]

But even if I send an event, how do I force the synchronization to happen?

Sent from my iPhone

[Witold Szczerba]

The point was to create a new ng-model like directive which would
synchronize on angular event instead of DOM notification.

[Witold Szczerba]

Something like this perhaps:
http://jsfiddle.net/witoldsz/UvRmw/

Regards,
Witold Szczerba

[leon...@gmail.com]

Excellent works like magic

[nav...@greenapplesolutions.com]

@Witold Szczerba  - How can I fire this angular event from jQuery or normal javascript code?

[Andrew Mayorov]

Thank you, this works!

As I think, there should be something like $scope.$$sync( "fieldname" ) built right into the Angular. It is a must have.

Best,
Andrew

[Witold Szczerba]

What is your case?

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.
 
 

[Witold Szczerba]

That would be a shame if you would directly reference a view from withinn controller as an workaround for issues like this. Or, if you would like to use it inside a directive, then the right place is the "ng-bind" as it is responsible for data binding in this very case. Scope object does not care or track the motivation of directives. It basically does not care about view layer at all, it works the other way around.

The important thing to notice is that model-view bindings are not coded in angular at core level. It is just one of many many directives that takes care of this. You could write another directive which would do a "live binding" an input text field to some remote service. Imagine there is a bug in this directive. How would you like "scope" to be able to "fix" the issue with some special method like $$sync?

Regards,
Witold Szczerba

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.

[Kyle Newsome]

Witold, I tip my hat at you for this solution without any jQuery/JS. It is inelegant and counterproductive to angular's paradigm to try and do this outside of a directive imo.

On Monday, August 27, 2012 10:03:18 AM UTC-4, Witold Szczerba wrote: