CODEWITHSUNDEEP
javascriptangularjsangular-material
Prerak Sola
Prerak Sola

Reputation: 10009

Update $scope in an $interval function

I have a login page designed using angular-material. Along with this I also have a password manager chrome extension which works well on many other websites.

What I am trying to achieve is to make the login page compatible with my password manager extension. The extension is provided with the id of the fields, next it fetches the data to be inserted into it and in the last it fills the input with the fetched value. This is done using pure JS like below:

var inputBox = document.getElementById(fieldId);
if (typeof inputBox !== "undefined" && inputBox !== null) {
    inputBox.click();
    inputBox.focus();
    inputBox.value = fetchedValue;
}

However, on the login page, I have a dialog that displays the form fields. The extension is able to find the fields using the id and also able to insert the value. But even after that the form validation error for required condition is shown.

I tried to replicate the behaviour in angular using the below code:

$scope.user = {
    username: '',
    password: ''
};

$interval(function() {
    var inputBox = document.getElementById("username");
    console.log(inputBox);
    if (typeof inputBox !== "undefined" && inputBox !== null) {
        inputBox.click();
        inputBox.focus();
        inputBox.value = "test";
    }
}, 2000, 1);

The username field is bound to $scope.user.username but still upon insertion, the scope is not modified.

Here's the JSFiddle where the issue is replicated: https://jsfiddle.net/prerak6962/fxwmda5w/2/

Upvotes: 0

Views: 197

Answers (1)

Petr Averyanov
Petr Averyanov

Reputation: 9476

Why not just:

$interval(function() {
            var inputBox = document.getElementById("username");
            console.log(inputBox);
            if (typeof inputBox !== "undefined" && inputBox !== null) {
                inputBox.focus();
                $scope.user.username = "test";
            }
        }, 2000, 1);

Angular do not watch values in inputs, instead it listen to DOM-events to track changes, when you change element content manually - angular will never know that something changed.

P.S. Angular is PLAIN JS. There is no 'magic'. For example, this strange code will work:

var user = {
            username: '',
            password: ''
        };
var rootScope;        

(function() {
    'use strict';
    angular.module('chipsDemo', [])
        .controller('BasicDemoCtrl', DemoCtrl);

    function DemoCtrl($scope, $rootScope) {
        $scope.user = user;
        rootScope = $rootScope;
    }
})();

setInterval(function() {
  user.password = new Date().getTime();
  rootScope.$apply();
}, 1000);

Upvotes: 1

Related Questions