Angular JS update model from dom

Question

I've seen heaps of questions about this, and all of them seem to be solved by either calling $scope.$apply(), $scope.$digest(), or by triggering the change() method on the input. But I can't seem to get it working with any of those methods. In this fiddle, I can type a name into the box and get the model value to update as I type. But when I click the link, to set the input name to a certain value, I want the model name to update. What do I need to do?

The reason I'm trying to do this is I want to be able to refresh my angular model when a user autofills the form, using the browser autofill or LastPass or similar. Surely there's some angular command to refresh the model from the DOM?

http://jsfiddle.net/PXCUq/

$(function () {
    $('#setFirstName').click(function () {
        $('input.firstname').val('Test Name');
        angular.element($('input.firstname')[0]).scope().$apply();
        // Model still not updated
    });
});

Is there a reason you are not doing it this way instead?: <a ng-click="input.firstname = 'Test Name'">set first name</a>? — Mark Rajcok
– Mark Rajcok, Commented Feb 6, 2013 at 22:18
I'm looking for a workaround to make browser form autofills work. This is a simpler way of getting the value to change without user input, to demonstrate the problem. — Jeremy Warne
– Jeremy Warne, Commented Feb 6, 2013 at 22:29

Mark Rajcok · Accepted Answer · 2013-02-06 22:46:59Z

6

Get the scope, then change the ng-model property:

$('#setFirstName').click(function() {
    var scope = angular.element($('input').get(0)).scope()
    scope.firstname = 'Test Name';
    scope.$apply();
});

You can come up with a better jQuery selector. I was only focusing on the Angular part.

Fiddle.

edited Feb 6, 2013 at 22:46

answered Feb 6, 2013 at 22:40

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeremy Warne Over a year ago

This would sort of work... So to refresh the model from the dom, I'd need to run through every element, get its ng-model attribute, and set the model value like that. Is there really no way to do this within Angular?

slowpoison Over a year ago

You don't need to go through every element to get its scope. You just get scope once. Like: scope = angular.element($('div[ng-view] > *)[0]).scope()

Collectives™ on Stack Overflow

Angular JS update model from dom

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related