Javascript Angularjs：如何更新用我无法控制的外部代码所做的DOM更改？_Javascript_Angularjs_Google Chrome Extension_Forms_Html Input

Javascript Angularjs：如何更新用我无法控制的外部代码所做的DOM更改？

javascript angularjs google-chrome-extension forms

Javascript Angularjs：如何更新用我无法控制的外部代码所做的DOM更改？,javascript,angularjs,google-chrome-extension,forms,html-input,Javascript,Angularjs,Google Chrome Extension,Forms,Html Input,我正在使用Angular创建一个登录表单，并且还使用了一个名为的Chrome扩展。扩展的工作原理是用哈希版本的密码替换密码输入字段中的数据问题是当Chrome扩展将新数据注入密码字段时，模型没有更新当我搜索类似的问题时，我看到了使用$scope.$apply（）作为解决方案的建议。据我所知，$scope.$apply（）必须被传递给改变情况的代码。我的理解正确吗？在这种情况下，我无法访问代码，因为它位于扩展中这里更普遍的问题是，当您无法控制的外部javascript正在操作DOM时，如何更

我正在使用Angular创建一个登录表单，并且还使用了一个名为的Chrome扩展。扩展的工作原理是用哈希版本的密码替换密码输入字段中的数据

问题是当Chrome扩展将新数据注入密码字段时，模型没有更新

当我搜索类似的问题时，我看到了使用$scope.$apply（）作为解决方案的建议。据我所知，$scope.$apply（）必须被传递给改变情况的代码。我的理解正确吗？在这种情况下，我无法访问代码，因为它位于扩展中

这里更普遍的问题是，当您无法控制的外部javascript正在操作DOM时，如何更新作用域

下面的示例代码演示了我的问题

示例视图

 <body ng-controller="MainCtrl">
    <input ng-model="password" type="password" name="password"/><br><br>
    <button type="submit" value="Submit" ng-click="submit()">
     Submit
    </button><br><br>
    <span>DOM Value: {{domValue}}</span><br>
    <span>Scope Value: {{scopeValue}}</span>
  </body>

这个例子可以在下面的例子中看到。要让它工作，你必须安装上面提到的Chrome扩展。在密码字段中键入内容后，单击扩展哈希按钮，然后单击提交按钮，您可以看到DOM值和范围值不同

这是解决这个问题的正确方法

显然，这是一个角度的问题，尽管出于各种原因，这个问题可能尚未正式解决。然而，一位谷歌Angular开发人员使用这个polyfill编写了一个完美的解决方案，可能是最好的解决方案，因为它是由实际的Angular开发人员构建的

我不想给我的代码增加那么多额外的重量，所以我使用了这个解决方案，来自同一个线程

本指令：

app.directive("autofill", function () {
return {
    require: "ngModel",
    link: function (scope, element, attrs, ngModel) {
        scope.$on("autofill-update", function() {
            ngModel.$setViewValue(element.val());
        });
     }
   };
});

然后，控制器中的这一行：

$scope.$broadcast("autofill-update");

如果你有类似的问题，请考虑使用其中的一个解决方案或访问另一个来了解更多。这让我想起了浏览器自动填写登录表单时收到通知的类似问题。你可以试试这个。谢谢你，伯纳德，我现在正在调查此事。

$scope.$broadcast("autofill-update");