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永远不会知道某些内容发生了变化。

P.S。 Angular是PLAIN JS。没有魔法＆＃39;。例如，这个奇怪的代码将起作用：

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

更新$ interval函数中的$ scope

1 个答案: