Angularjs：如何更新使用我无法控制的外部代码所做的 DOM 更改？
Posted
技术标签:
【中文标题】Angularjs：如何更新使用我无法控制的外部代码所做的 DOM 更改？【英文标题】：Angularjs: How do I update DOM changes made with outside code I have no control over? 【发布时间】：2014-12-06 22:06:13 【问题描述】：我正在使用 Angular 构建一个登录表单，并且还使用了一个名为 Password Hasher Plus 的 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>
示例控制器
app.controller('MainCtrl', function($scope)
$scope.submit = function()
$scope.domValue = document.getElementsByName("password")[0].value;
$scope.scopeValue = $scope.password;
;
);
这个例子可以在这个Plunker中看到。要让它工作，你必须安装上面提到的 Chrome 扩展。在密码字段中输入内容后，单击扩展哈希按钮，然后单击提交按钮，您可以看到 DOM 值和范围值不同。
【问题讨论】：
这让我想起了浏览器自动填写登录表单时收到通知的类似问题。你可以试试这个。 ***.com/questions/14965968/… 谢谢伯纳德，我正在调查这个问题。 【参考方案1】：link Bernard posted 是解决此问题的正确方法。
显然这是一个 Angular 问题，尽管由于各种原因可能没有正式修复。然而，一位 Google Angular 开发人员写了 a fix that solves this auto fill problem. 使用这个 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");
如果您遇到类似问题，请考虑使用其中一种解决方案或访问另一个SO thread 以了解更多信息。
【讨论】：
以上是关于Angularjs：如何更新使用我无法控制的外部代码所做的 DOM 更改？的主要内容，如果未能解决你的问题，请参考以下文章
如果 iframe 无法在 src 加载资源，如何显示替代图像？使用 AngularJs？
一旦AngularJs中的数据库发生变化，如何实现自动视图更新？