在 $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 条件的表单验证错误也会显示出来。

我尝试使用以下代码以角度复制行为：

$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 字段绑定到$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);