javascript - AngularJS browser autofill workaround by using a directive -

when submitting form in angularjs , use browser remember password functionality, , in subsequent login attempt let browser fill in login form username , password, $scope model won't changed based on autofill.

the dirty hack found use following directive:

app.directive("xsinputsync", ["$timeout" , function($timeout) {     return {         restrict : "a",         require: "?ngmodel",         link : function(scope, element, attrs, ngmodel) {             $timeout(function() {                 if (ngmodel.$viewvalue && ngmodel.$viewvalue !== element.val()) {                     scope.apply(function() {                         ngmodel.$setviewvalue(element.val());                     });                 }                 console.log(scope);                 console.log(ngmodel.$name);                 console.log(scope[ngmodel.$name]);             }, 3000);         }     }; }]); 

the problem ngmodel.$setviewvalue(element.val()); doesn't change model nor view based on element.val() returned value. how can accomplish that?

apparently known issue angular , open

i'm not sure here besides sort of work around you're trying. seems you're on right track. couldn't browser try remember password plunk, i'm not sure if work have look:

app.directive('autofillsync', function($timeout) {    return {       require: 'ngmodel',       link: function(scope, elem, attrs, ngmodel) {           var origval = elem.val();           $timeout(function () {               var newval = elem.val();               if(ngmodel.$pristine && origval !== newval) {                   ngmodel.$setviewvalue(newval);               }           }, 500);       }    } }); 

<form name="myform" ng-submit="login()">    <label for="username">username</label>    <input type="text" id="username" name="username" ng-model="username" auto-fill-sync/><br/>    <label for="password">password</label>    <input type="password" id="password" name="password" ng-model="password" auto-fill-sync/><br/>    <button type="submit">login</button> </form> 

i think need simplify approach bit. 1 thing recommend check ngmodel.$pristine , make sure you're not overwriting poor user's input. also, 3 seconds long. shouldn't have call $apply() in $timeout, btw, should queue $digest automatically.

the real catch: browser beat angular execution? browser?

this unwinnable war, why angular (or knockout) hasn't been able solve readily. there's no guarantee of state of data in input @ time of directive's initial execution. not @ time of angular's initialization.... it's tricky problem solve.