我有一个 HTML 页面,其中有一些使用 Angular 配置的 DOM。现在我正在构建一个 chrome 扩展来修改文本框中的值。 element.value= newValue
将不起作用,因为文本框是用 Angular 设计的。在阅读了一些资源之后,我开始知道我需要对元素的范围进行更改。我尝试在扩展中执行此操作。
var eleScope = window.angular.element(document.querySelector('.textbox')).scope();
eleScope.$apply(function() {
eleScope.item.request.box = newValue;
});
这似乎没有按预期工作。当我更深入地研究这个问题时,我发现 window 范围内的 Angular 没有得到正确的范围。
我还尝试从我的扩展中注入(inject) angular.js 并直接使用 angular.element
这似乎也无法解决问题。
我是不是错过了什么?感谢您的回复。
最佳答案
嗯..实际上,您应该能够使用普通 Javascript 或 JQuery 更改值,并且不需要更新范围,因为它是双向绑定(bind),即。更新 View 会更新模型,反之亦然。
模型不更新的唯一原因是观察者更新模型仅在“点击”或“输入”等特定事件上触发。
所以这里的解决方案是手动触发这些事件。 这可以通过以下方式完成:
// the selector used is based on your example.
var elementTOUpdate = $('.textbox');
input.val('new-value');
input.trigger('input');
最后一条语句将触发元素上“输入”事件的所有处理程序(这将触发 Angular 观察程序)并更新范围。 有关触发功能的更多信息: http://api.jquery.com/trigger/
关于javascript - 在 Chrome 扩展中使用页面的 Angular JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40100223/