javascript - 更新 $interval 函数中的 $scope

Question

我有一个使用angular-material设计的登录页面。除此之外，我还有一个密码管理器 Chrome 扩展，它在许多其他网站上运行良好。

我想要实现的是使登录页面与我的密码管理器扩展兼容。该扩展提供了字段的id，接下来它获取要插入其中的数据，最后它用获取的值填充输入。这是使用纯 JS 完成的，如下所示:

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

但是，在登录页面上，我有一个显示表单字段的对话框。该扩展能够使用 id 查找字段，也能够插入值。但即使在此之后，也会显示 required 条件的表单验证错误。

我尝试使用以下代码复制 Angular 行为:

$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);

username 字段绑定(bind)到 $scope.user.username，但在插入时，范围仍然没有修改。

这是复制问题的 JSFiddle:https://jsfiddle.net/prerak6962/fxwmda5w/2/

Answer 1

为什么不只是:

$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 不会观察输入中的值，而是监听 DOM 事件来跟踪更改，当您手动更改元素内容时 - Angular 永远不会知道某些内容发生了变化。

附注Angular 是 PLAIN JS。不存在“魔法”。例如，这个奇怪的代码将起作用:

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);